PatternLab (1.0.18)

Appearance

List ​

TIP

.c-list hides the default bullet points. Use .-ordered or .-unordered modifiers to display bullets / numbers.

  • 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.
Show Code
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

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • Apparently we had reached a great height in the atmosphere.

Example List on dark background

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Show Code
html
<ul class="c-list -unordered">
  <li class="c-list__item">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </li>
  <li class="c-list__item">Apparently we had reached a great height in the atmosphere.</li>
</ul>
<div class="h-highlight-block -dark m-t-m">
  <p>Example List on dark background</p>
  <ul class="c-list -unordered">
    <li class="c-list__item">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </li>
  </ul>
</div>

Ordered List ​

.c-list.-ordered

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • Apparently we had reached a great height in the atmosphere.

Example List on dark background

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Show Code
html
<ul class="c-list -ordered">
  <li class="c-list__item">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </li>
  <li class="c-list__item">Apparently we had reached a great height in the atmosphere.</li>
</ul>
<div class="h-highlight-block -dark m-t-m">
  <p>Example List on dark background</p>
  <ul class="c-list -ordered">
    <li class="c-list__item">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </li>
  </ul>
</div>

List Modifiers ​

Small List-Items ​

.c-list.-small

  • 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.
  • Apparently we had reached a great height in the atmosphere.
Show Code
html
<ul class="c-list -small -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>
</ul>
<ul class="c-list -small -ordered m-t-m">
  <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>

White Color ​

.c-list.-white

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Show Code
html
<div class="h-highlight-block -dark">
  <ul class="c-list -unordered -white">
    <li class="c-list__item">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </li>
  </ul>
  <ul class="c-list -ordered -white m-t-m">
    <li class="c-list__item">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </li>
  </ul>
</div>

Horizontal / Inline List ​

.c-list.-horizontal

  • List Item
  • List Item
  • List Item
Show Code
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>
</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">
            a[c-link -icon-right -icon-arrow]
        </a>
    </li>
  <li class="c-list__item">
        <button type="button" class="c-link -icon-right -icon-arrow">
            button[c-link -icon-right -icon-arrow]
        </button>
    </li>
    <li class="c-list__item">
        <a class="c-link -icon-right -icon-arrow">
            <span class="h-color-warning m-r-xs"><i class="fas fa-circle" aria-hidden="true"></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"><i class="fas fa-circle" aria-hidden="true"></i></span>
            c-link -icon-right -icon-arrow
        </a>
    </li>
</ul>

2026 - Pharma4u