Colour
Table of contents
Background colours
Use background colours to highlight content and / or create information blocks that focus the user's attention. You can apply these background colours to a grid cell or to an HTML element for example, a heading. Do not overuse background colours or they will lose their effect.
| Class | Heading | Paragraph | Span | Div |
|---|---|---|---|---|
background-white |
Lorem ipsum |
Lorem ipsum |
Lorem ipsum | Lorem ipsum |
background-light |
Lorem ipsum |
Lorem ipsum |
Lorem ipsum | Lorem ipsum |
background-medium |
Lorem ipsum |
Lorem ipsum |
Lorem ipsum | Lorem ipsum |
background-dark |
Lorem ipsum |
Lorem ipsum |
Lorem ipsum | Lorem ipsum |
background-accent |
Lorem ipsum |
Lorem ipsum |
Lorem ipsum | Lorem ipsum |
background-highlight |
Lorem ipsum |
Lorem ipsum |
Lorem ipsum | Lorem ipsum |
View Code
<div class="span-3 background-dark"> <p>Background dark</p> </div>
Font colours
Use font colours to highlight content and / or create information blocks that focus the user's attention. Do not overuse font colours or they will lose their effect.
| Class | Details | Example |
|---|---|---|
color-medium |
A muted dark tone used for accent text. | Resulting text colour |
color-dark |
The default text colour. | Resulting text colour |
color-accent |
Match the font colour to colour theme. | Resulting text colour |
color-attention |
Draw attention to something extra important. | Resulting text colour |
View Code
<p class="color-attention">Super important text</p>
- Date modified: