Lists

Embrace implements sensible typographic defaults with minimal styles that target list elements directly. These defaults can be overridden by styling classes if required.

Unordered lists

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Phasellus iaculis neque
• Purus sodales ultricies
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc

<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
</ul>

Ordered lists

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet

<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>
</ol>

Description lists

Description lists have no explicit styling, other than to normalize browser rendering, as they don’t get used very often there’s little point in defining styling classes for them. If you want to, add your own styles to assets/_sass/patterns/lists.scss.

Description lists

A description list is perfect for defining terms.

<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
</dl>