Patterns

v-0.0.0

Primary

Line

Line reverse

Thin line

Thin line reverse

Dot

Square

<span class="pat--line bg--primary"></span>
<span class="pat--lineReverse bg--primary"></span>
<span class="pat--thinLine bg--primary"></span>
<span class="pat--thinLineReverse bg--primary"></span>
<span class="pat--dot bg--primary"></span>
<span class="pat--square bg--primary"></span>

Use cases

Do

• Combine it with a background color
• Use it for decorative or accessibility purpose

Don't

• Write text on it exept on thin line or with a light background

Classes

pat--[patternName]

Pattern names

• line
• lineReverse
• thinLine
• thinLineReverse
• dot
• square