PatternLab (0.1.259)

# Lists

.c-list

  • Apparently we had reached a great height in the atmosphere.
  • Apparently we had reached a great height in the atmosphere.
  • Apparently we had reached a great height in the atmosphere.
hide code 
<ul class="c-list">
    <li class="c-list__item">Apparently we had reached a great height in the atmosphere.</li>
    <li class="c-list__item">Apparently we had reached a great height in the atmosphere.</li>
    <li class="c-list__item">Apparently we had reached a great height in the atmosphere.</li>
</ul>

# Unordered List

.c-list.-unordered

  • Apparently we had reached a great height in the atmosphere.
  • Apparently we had reached a great height in the atmosphere.
  • Apparently we had reached a great height in the atmosphere.
hide code 
<ul class="c-list -unordered">
    <li class="c-list__item">Apparently we had reached a great height in the atmosphere.</li>
    <li class="c-list__item">Apparently we had reached a great height in the atmosphere.</li>
    <li class="c-list__item">Apparently we had reached a great height in the atmosphere.</li>
</ul>

# Ordered List

.c-list.-ordered

  • Apparently we had reached a great height in the atmosphere.
  • Apparently we had reached a great height in the atmosphere.
  • Apparently we had reached a great height in the atmosphere.
hide code 
<ul class="c-list -ordered">
    <li class="c-list__item">Apparently we had reached a great height in the atmosphere.</li>
    <li class="c-list__item">Apparently we had reached a great height in the atmosphere.</li>
    <li class="c-list__item">Apparently we had reached a great height in the atmosphere.</li>
</ul>

# List Modifiers

# Small List-Items

.c-list.-small

  • List Item
  • List Item
  • List Item
  • List Item
hide code 
<ul class="c-list -small">
    <li class="c-list__item">List Item</li>
    <li class="c-list__item">List Item</li>
    <li class="c-list__item">List Item</li>
    <li class="c-list__item">List Item</li>
</ul>

# Horizontal / Inline List

.c-list.-horizontal

  • List Item
  • List Item
  • List Item
  • List Item
hide code 
<ul class="c-list -horizontal">
    <li class="c-list__item">List Item</li>
    <li class="c-list__item">List Item</li>
    <li class="c-list__item">List Item</li>
    <li class="c-list__item">List Item</li>
</ul>

# Checkmark List

.c-list.-unordered.-has-checkmarks

  • List Item
  • List Item
  • List Item
  • List Item
hide code 
<ul class="c-list -unordered -has-checkmarks">
    <li class="c-list__item">List Item</li>
    <li class="c-list__item">List Item</li>
    <li class="c-list__item">List Item</li>
    <li class="c-list__item">List Item</li>
</ul>

.c-list.-linklist

hide code 
<ul class="c-list -linklist">
    <li class="c-list__item"><a class="c-link -icon-right -icon-arrow">c-link -icon-right -icon-arrow</a></li>
    <li class="c-list__item"><a class="c-link -icon-right -icon-arrow">c-link -icon-right -icon-arrow</a></li>
    <li class="c-list__item"><a class="c-link -icon-right -icon-arrow">c-link -icon-right -icon-arrow</a></li>
</ul>

← Notification Layer →