Generic

List Jump to Source

Basic list styles.

Primary List

  • 1
  • 2
  • 3

List Colours

  • Colour: Fuzzy Wuzzy Brown.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae neque semper, hendrerit felis nec, tincidunt nibh. Phasellus suscipit accumsan dolor non efficitur.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae neque semper, hendrerit felis nec, tincidunt nibh. Phasellus suscipit accumsan dolor non efficitur. Etiam dapibus at ante vel consectetur.
  • Colour: River Bed
  • 2
  • 3
  • Colour: Allports
  • 2
  • 3
  • Colour: Japanese Laurel
  • 2
  • 3
  • Colour: Green Haze
  • 2
  • 3
  • Colour: Tamarillo
  • 2
  • 3
  • Colour: Rose of Sharon
  • 2
  • 3
  • Colour: Wisteria
  • 2
  • 3
  • Colour: Olive
  • 2
  • 3

<h4>Primary List</h4>
<ul class="o-list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<h4>List Colours</h4>

<div style="display: flex; flex-wrap: wrap;">
    
    <ul class="o-list o-list--fuzzy-wuzzy-brown" style="width: 33%;">
        <li>Colour: Fuzzy Wuzzy Brown.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae neque semper, hendrerit felis nec, tincidunt nibh. Phasellus suscipit accumsan dolor non efficitur.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae neque semper, hendrerit felis nec, tincidunt nibh. Phasellus suscipit accumsan dolor non efficitur. Etiam dapibus at ante vel consectetur.</li>
    </ul>
    
    <ul class="o-list o-list--river-bed" style="width: 33%;">
        <li>Colour: River Bed</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
    <ul class="o-list o-list--allports" style="width: 33%;">
        <li>Colour: Allports</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
    <ul class="o-list o-list--japanese-laurel" style="width: 33%;">
        <li>Colour: Japanese Laurel</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
    <ul class="o-list o-list--green-haze" style="width: 33%;">
        <li>Colour: Green Haze</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
    <ul class="o-list o-list--tamarillo" style="width: 33%;">
        <li>Colour: Tamarillo</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
    <ul class="o-list o-list--rose-of-sharon" style="width: 33%;">
        <li>Colour: Rose of Sharon</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
    <ul class="o-list o-list--wisteria" style="width: 33%;">
        <li>Colour: Wisteria</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
    <ul class="o-list o-list--olive" style="width: 33%;">
        <li>Colour: Olive</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
Page Generated: Thu, Sep 29, 2022 at 2:54:22 PM