SGDS Colour classes

SGDS contains predefined classes that apply different colours to specific elements. You can use these colour classes by adding is- or has- prefixes to most elements.


Colour classes

white
#ffffff

black
#000000

light
#f5f5f5

dark
#323232

primary
#6037b3
Contrast Ratio : 7.79

secondary
#3e69be
Contrast Ratio : 5.29

info
#008196
Contrast Ratio : 4.58

success
#008649
Contrast Ratio : 4.66

warning1
#f5a623
Contrast Ratio : 10.36

danger
#d0021b
Contrast Ratio : 5.67

1Most shades of amber such as the one used in the warning class only meet WCAG contrast requirements when paired with black, e.g. black text within elements with .has-background-warning
Text colours
Class Example Usage
has-text-white Use the has-text-white colour class to set text colour
<p class="has-text-white">
    Use the <code>has-text-white</code> colour class to set text colour
</p>
has-text-black Use the has-text-black colour class to set text colour
<p class="has-text-black">
    Use the <code>has-text-black</code> colour class to set text colour
</p>
has-text-light Use the has-text-light colour class to set text colour
<p class="has-text-light">
    Use the <code>has-text-light</code> colour class to set text colour
</p>
has-text-dark Use the has-text-dark colour class to set text colour
<p class="has-text-dark">
    Use the <code>has-text-dark</code> colour class to set text colour
</p>
has-text-primary Use the has-text-primary colour class to set text colour
<p class="has-text-primary">
    Use the <code>has-text-primary</code> colour class to set text colour
</p>
has-text-secondary Use the has-text-secondary colour class to set text colour
<p class="has-text-secondary">
    Use the <code>has-text-secondary</code> colour class to set text colour
</p>
has-text-link Use the has-text-link colour class to set text colour
<p class="has-text-link">
    Use the <code>has-text-link</code> colour class to set text colour
</p>
has-text-info Use the has-text-info colour class to set text colour
<p class="has-text-info">
    Use the <code>has-text-info</code> colour class to set text colour
</p>
has-text-success Use the has-text-success colour class to set text colour
<p class="has-text-success">
    Use the <code>has-text-success</code> colour class to set text colour
</p>
has-text-warning Use the has-text-warning colour class to set text colour
<p class="has-text-warning">
    Use the <code>has-text-warning</code> colour class to set text colour
</p>
has-text-danger Use the has-text-danger colour class to set text colour
<p class="has-text-danger">
    Use the <code>has-text-danger</code> colour class to set text colour
</p>

Background colours
Class Example Usage
has-text-white Use the has-background-white colour class to set background colour
<p class="has-background-white">
    Use the <code>has-background-white</code> colour class to set background colour
</p>
has-text-black Use the has-background-black colour class to set background colour
<p class="has-background-black">
    Use the <code>has-background-black</code> colour class to set background colour
</p>
has-text-light Use the has-background-light colour class to set background colour
<p class="has-background-light">
    Use the <code>has-background-light</code> colour class to set background colour
</p>
has-text-dark Use the has-background-dark colour class to set background colour
<p class="has-background-dark">
    Use the <code>has-background-dark</code> colour class to set background colour
</p>
has-text-primary Use the has-background-primary colour class to set background colour
<p class="has-background-primary">
    Use the <code>has-background-primary</code> colour class to set background colour
</p>
has-text-secondary Use the has-background-secondary colour class to set background colour
<p class="has-background-secondary">
    Use the <code>has-background-secondary</code> colour class to set background colour
</p>
has-text-link
<p class="has-background-link">
    Use the <code>has-background-link</code> colour class to set background colour
</p>
has-text-info Use the has-background-info colour class to set background colour
<p class="has-background-info">
    Use the <code>has-background-info</code> colour class to set background colour
</p>
has-text-success Use the has-background-success colour class to set background colour
<p class="has-background-success">
    Use the <code>has-background-success</code> colour class to set background colour
</p>
has-text-warning Use the has-background-warning colour class to set background colour
<p class="has-background-warning">
    Use the <code>has-background-warning</code> colour class to set background colour
</p>
has-text-danger Use the has-background-danger colour class to set background colour
<p class="has-background-danger">
    Use the <code>has-background-danger</code> colour class to set background colour
</p>

Component colours

Use the is-*color* class to set the component colors for:

Example on is-*color* color class works for Button component:

Class Example Usage
is-white
<button type="button" class="sgds-button is-white">Button</button>
is-black
<button type="button" class="sgds-button is-black">Button</button>
is-light
<button type="button" class="sgds-button is-light">Button</button>
is-dark
<button type="button" class="sgds-button is-dark">Button</button>
is-primary
<button type="button" class="sgds-button is-primary">Button</button>
is-secondary
<button type="button" class="sgds-button is-secondary">Button</button>
is-link
<button type="button" class="sgds-button is-link">Button</button>
is-info
<button type="button" class="sgds-button is-info">Button</button>
is-success
<button type="button" class="sgds-button is-success">Button</button>
is-warning
<button type="button" class="sgds-button is-warninghas-text-black">Button</button>
is-danger
<button type="button" class="sgds-button is-danger">Button</button>