We will be upgrading to a new portal soon. Learn more

Colours

SGDS Colour classes

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.

white
#ffffff

black
#000000

light
#f5f5f5

dark
#323232

primary
#6137b3
Contrast Ratio : 7.76

secondary
#3d68bd
Contrast Ratio : 5.29

link
#0070f0
Contrast Ratio : 4.59

info
#008094
Contrast Ratio : 4.65

success
#008549
Contrast Ratio : 4.72

warning1
#f5a524
Contrast Ratio : 10.29

danger
#cf021a
Contrast Ratio : 5.71

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

Component colours

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

Example of is-*color* classes for the 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>

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-background-white Use the has-background-white colour class to set background colour 
<div class="has-background-white">
Use the <code>has-background-white</code> colour class to set background colour
</div>
has-background-black Use the has-background-black colour class to set background colour 
<div class="has-background-black">
Use the <code>has-background-black</code> colour class to set background colour
</div>
has-background-light Use the has-background-light colour class to set background colour 
<div class="has-background-light">
Use the <code>has-background-light</code> colour class to set background colour
</div>
has-background-dark Use the has-background-dark colour class to set background colour 
<div class="has-background-dark">
Use the <code>has-background-dark</code> colour class to set background colour
</div>
has-background-primary Use the has-background-primary colour class to set background colour 
<div class="has-background-primary">
Use the <code>has-background-primary</code> colour class to set background colour
</div>
has-background-secondary Use the has-background-secondary colour class to set background colour 
<div class="has-background-secondary">
Use the <code>has-background-secondary</code> colour class to set background colour
</div>
has-background-link Use the has-background-link colour class to set background colour 
<div class="has-background-link">
Use the <code>has-background-link</code> colour class to set background colour
</div>
has-background-info Use the has-background-info colour class to set background colour 
<div class="has-background-info">
Use the <code>has-background-info</code> colour class to set background colour
</div>
has-background-success Use the has-background-success colour class to set background colour 
<div class="has-background-success">
Use the <code>has-background-success</code> colour class to set background colour
</div>
has-background-warning Use the has-background-warning colour class to set background colour 
<div class="has-background-warning">
Use the <code>has-background-warning</code> colour class to set background colour
</div>
has-background-danger Use the has-background-danger colour class to set background colour 
<div class="has-background-danger">
Use the <code>has-background-danger</code> colour class to set background colour
</div>

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component