Typography Extended

Custom additions to Typography

On this page

Numbered List

Basic

Liander Boostrap variant of the ordered list.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.

html

<ol class="numbered-list">
  <li>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.</p>
  </li>
  <li>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.</p>
  </li>
  <li>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.</p>
  </li>
</ol>

Titles

Add any of the headings with numbered-list-title to create a title for the list item.

Title of numbered list item

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.
Title of numbered list item

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.

html

<ol class="numbered-list">
  <li>
    <h3>Title of numbered list item</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.</p>
  </li>
  <li>
    <h3>Title of numbered list item</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.</p>
  </li>
</ol>

Connected

Adding numbered-list-connected will connect the list items with a dotted line.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.

html

<ol class="numbered-list numbered-list-connected">
  <li>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.</p>
  </li>
  <li>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.</p>
  </li>
  <li>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.</p>
  </li>
</ol>

Connected large

Adding numbered-list-lg numbered-list-connected will connect the list items with a dotted line and display it with large icons.

this is the first title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.
this is the second title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.
this is the third title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.

html

<ol class="numbered-list numbered-list-lg numbered-list-connected">
  <li>
    <h3>this is the first title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.</p>
  </li>
  <li>
    <h3>this is the second title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.</p>
  </li>
  <li>
    <h3>this is the third title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus omnis eaque accusantium pariatur impedit in. Totam neque, expedita deleniti. Sint soluta, similique iusto assumenda magni dignissimos saepe et quisquam, obcaecati.</p>
  </li>
</ol>