PatternLab Vite (1.8.12)

Appearance

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.
html
<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.
html
<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.
html
<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
html
<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
html
<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

.c-list.-linklist

Show Code
html
<ul class="c-list -linklist">
    <li class="c-list__item">
        <a class="c-link -icon-right -icon-arrow">
            <span class="h-color-success m-r-xs" aria-hidden="true"><i class="fas fa-circle"></i></span>
            c-link -icon-right -icon-arrow
        </a>
    </li>
    <li class="c-list__item">
        <a class="c-link -icon-right -icon-arrow">
            <span class="h-color-warning m-r-xs" aria-hidden="true"><i class="fas fa-circle"></i></span>
            c-link -icon-right -icon-arrow
        </a>
    </li>
    <li class="c-list__item">
        <a class="c-link -icon-right -icon-arrow">
            <span class="h-color-error m-r-xs" aria-hidden="true"><i class="fas fa-circle"></i></span>
            c-link -icon-right -icon-arrow
        </a>
    </li>
</ul>

Copyright © 2024 - present Pharma4u