Pulse Jobs Styleguide

Primary List

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

Source


<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, Jun 1, 2023 at 12:00:57 PM

Generic

List Jump to Source

Primary List

List Colours