Lists

Embrace’s default list styles can optionally be extended with these styling classes.

Styled Lists

Apply your projects default list style with the class .list--styled. Tweak, or expand upon, this class to fit your project. Add your own styles or modify these at /src/scss/patterns/lists.scss.

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet

<ul class="list--styled">
  <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>
</ul>

Underlined Lists

An alternate list styling class is also provided with .list--underlined, which does what you would expect…

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet

<ul class="list--underlined">
  <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>
</ul>

Unstyled Lists

Remove default list styles with .list--unstyled, and make your list not look like a list.

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

<ol class="list--unstyled">
  <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>

Inline Lists

Force list elements to display inline with .list--inline. Don’t use this class for navigation lists though, use .nav instead as it @extends .list--inline and additionaly provides finger-sized tap-targets and stuff.

• Lorem
• Ipsum
• Dolor
• Sit

<ul class="list--inline">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
  <li>Sit</li>
</ul>