{/* Headings */}
<h1>h1. Finder heading</h1>
<h2>h2. Finder heading</h2>
<h3>h3. Finder heading</h3>
<h4>h4. Finder heading</h4>
<h5>h5. Finder heading</h5>
<h6>h6. Finder heading</h6>

{/* Display headings */}
<h1 className='display-1'>Display 1</h1>
<h1 className='display-2'>Display 2</h1>
<h1 className='display-3'>Display 3</h1>
<h1 className='display-4'>Display 4</h1>
<h1 className='display-5'>Display 5</h1>
<h1 className='display-6'>Display 6</h1>

{/* Body text sizes */}
<p className='fs-1'>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p className='fs-2'>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p className='fs-3'>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p className='fs-4'>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p className='fs-5'>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p className='fs-6'>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p className='lead'>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p className='fs-lg'>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p className='fs-sm'>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p className='fs-xs'>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p className='fs-xxs'>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>

{/* Inline text elements */}
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<p><a href="#">Inline link</a></p>

{/* Abbreviations */}
<p><abbr title='attribute'>attr</abbr></p>
<p><abbr className='initialism' title='HyperText Markup Language'>HTML</abbr></p>

import Blockquote from '../components/Blockquote'

{/* Blockquote: left aligned (Default) */}
<Blockquote author={{name: 'Someone famous in Source Title'}}>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
</Blockquote>

{/* Blockquote: center aligned */}
<Blockquote author={{name: 'Someone famous in Source Title'}} align='center'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
</Blockquote>

{/* Blockquote: right aligned */}
<Blockquote author={{name: 'Someone famous in Source Title'}} align='end'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
</Blockquote>

{/* Unordered list */}
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
</ul>

{/* Ordered list */}
<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
</ol>

{/* Unstyled list */}
<ul className='list-unstyled'>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
</ul>

{/* Inline list */}
<ul className='list-inline'>
  <li className='list-inline-item'>Lorem ipsum dolor</li>
  <li className='list-inline-item'>Consectetur adipiscing</li>
  <li className='list-inline-item'>Integer molestie</li>
</ul>

{/* Description list basic example */}
<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
</dl>

import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'

{/* Description alignment using rows and columns */}
<Row as='dl' className='mb-0'>
  <Col as='dt' sm={3}>Description lists</Col>
  <Col as='dd' sm={9}>A description list is perfect for defining terms.</Col>
  <Col as='dt' sm={3}>Euismod</Col>
  <Col as='dd' sm={9}>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</Col>
  <Col as='dt' sm={3}>Malesuada porta</Col>
  <Col as='dd' sm={9}>Etiam porta sem malesuada magna mollis euismod.</Col>
  <Col as='dt' sm={3} className='text-truncate'>Long truncated term is truncated</Col>
  <Col as='dd' sm={9}>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</Col>
  <Col as='dt' sm={3}>Nesting</Col>
  <Col as='dd' sm={9}>
    <Row as='dl'>
      <Col as='dt' sm={4}>Nested definition list</Col>
      <Col as='dd' sm={8}>Aenean posuere, tortor sed cursus feugiat nunc augue.</Col>
    </Row>
  </Col>
</Row>