Unordered

A list of items in which the order does not explicitly matter. Default styling positions outside with left padding proportional to $baseFontSize.

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
• Phasellus iaculis neque
• Purus sodales ultricies
• Vestibulum laoreet porttitor sem
• Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

<ul>
  <li>...</li>
</ul>

Ordered

A list of items in which the order does explicitly matter. As with unordered lists, default styling positions outside with left padding proportional to $baseFontSize.

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

Unstyled

Remove the default list-style and left padding on list items (immediate children only).

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
• Phasellus iaculis neque
• Purus sodales ultricies
• Vestibulum laoreet porttitor sem
• Ac tristique libero volutpat at
1. Faucibus porta lacus fringilla vel
2. Aenean sit amet erat nunc
• Eget porttitor lorem

<ul class="romo-list-unstyled">
  <li>...</li>
</ul>

Inline

Place all list items on a single line with inline-block.

• Lorem ipsum
• Phasellus iaculis
• Nulla volutpat

<ul class="romo-list-inline">
  <li>...</li>
</ul>

Optional classes

.romo-list-pad{N}

Add padding separating each item.

<ul class="romo-list-inline romo-list-pad0">
  <li>...</li>
</ul>

<ul class="romo-list-inline romo-list-pad">
  <li>...</li>
</ul>

<ul class="romo-list-inline romo-list-pad1">
  <li>...</li>
</ul>

<ul class="romo-list-inline romo-list-pad2">
  <li>...</li>
</ul>

.romo-list-push{N}

Add margin separating each item.

<ul class="romo-list-inline romo-list-push0">
  <li>...</li>
</ul>

<ul class="romo-list-inline romo-list-push">
  <li>...</li>
</ul>

<ul class="romo-list-inline romo-list-push1">
  <li>...</li>
</ul>

<ul class="romo-list-inline romo-list-push2">
  <li>...</li>
</ul>