1. Design System
  2. Base
  3. Utilities

Utilities

Utilities and helper classes.

Alignment

You can align the text with the use of one of 4 alignment helpers.

<p class="has-text-centered">Text centred</p>
<p class="has-text-justified">Text justified</p>
<p class="has-text-left">Text aligned left</p>
<p class="has-text-right">Text aligned right</p>

Text transformation

You can transform the text with the use of one of 4 text transformation helpers.

<p class="is-capitalized">Text capitalized</p>
<p class="is-lowercase">Text lowercase</p>
<p class="is-uppercase">Text uppercase</p>
<p class="is-italic">Text italic</p>

Text weight

You can transform the text weight with the use of one of 5 text weight helpers:

<p class="has-text-weight-light">has-text-weight-light</p>
<p class="has-text-weight-normal">has-text-weight-normal</p>
<p class="has-text-weight-medium">has-text-weight-medium</p>
<p class="has-text-weight-semibold">has-text-weight-semibold</p>
<p class="has-text-weight-bold">has-text-weight-bold</p>

Size

There are 7 sizes to choose from:

<p class="is-size-1">is-size-1</p>
<p class="is-size-2">is-size-2</p>
<p class="is-size-3">is-size-3</p>
<p class="is-size-4">is-size-4</p>
<p class="is-size-5">is-size-5</p>
<p class="is-size-6">is-size-6</p>
<p class="is-size-7">is-size-7</p>

Text colour

You can set any element to one of the 10 colours or 9 shades of grey:

<p class="has-background-grey-light has-text-white p-10">has-text-white - #ffffff</p>
<p class="has-background-grey-light has-text-light p-10">has-text-light - #f5f5f5</p>
<p class="has-background-white has-text-dark p-10">has-text-dark - #363636</p>
<p class="has-background-white has-text-black p-10">has-text-black - #0a0a0a</p>
<p class="has-background-white has-text-primary p-10">has-text-primary - #f9c909</p>
<p class="has-background-white has-text-info p-10">has-text-info - #209cee</p>
<p class="has-background-white has-text-link p-10">has-text-link - #3273dc</p>
<p class="has-background-white has-text-success p-10">has-text-success - #23d160</p>
<p class="has-background-white has-text-warning p-10">has-text-warning - #ffdd57</p>
<p class="has-background-white has-text-danger p-10">has-text-danger - #ff3860</p>
<p class="has-background-white has-text-black-bis p-10">has-black-text-bis - #121212</p>
<p class="has-background-white has-text-black-ter p-10">has-black-text-ter - #242424</p>
<p class="has-background-white has-text-grey-darker p-10">has-text-grey-darker - #363636</p>
<p class="has-background-white has-text-grey-dark p-10">has-text-grey-dark - #4a4a4a</p>
<p class="has-background-white has-text-grey p-10">has-text-grey - #7a7a7a</p>
<p class="has-background-dark has-text-grey-light p-10">has-text-grey-light - #b5b5b5</p>
<p class="has-background-dark has-text-grey-lighter p-10">has-text-grey-lighter - #dbdbdb</p>
<p class="has-background-dark has-text-white-ter p-10">has-text-white-ter - #f5f5f5</p>
<p class="has-background-dark has-text-white-bis p-10">has-text-white-bis - #fafafa</p>

Background colour

You can set any element to one of the 10 colours or 9 shades of grey:

<p class="has-background-white p-10">has-background-white - #ffffff</p>
<p class="has-background-light p-10">has-background-light - #f5f5f5</p>
<p class="has-background-dark has-text-white p-10">has-background-dark - #363636</p>
<p class="has-background-black has-text-white p-10">has-background-black - #0a0a0a</p>
<p class="has-background-primary has-text-white p-10">has-background-primary - #f9c909</p>
<p class="has-background-info has-text-white p-10">has-background-info - #209cee</p>
<p class="has-background-link has-text-white p-10">has-background-link - #3273dc</p>
<p class="has-background-success has-text-white p-10">has-background-success - #23d160</p>
<p class="has-background-warning has-text-black p-10">has-background-warning - #ffdd57</p>
<p class="has-background-danger has-text-white p-10">has-background-danger - #ff3860</p>
<p class="has-background-black-bis has-text-white p-10">has-black-background-bis - #121212</p>
<p class="has-background-black-ter has-text-white p-10">has-black-background-ter - #242424</p>
<p class="has-background-grey-darker has-text-white p-10">has-background-grey-darker - #363636</p>
<p class="has-background-grey-dark has-text-white p-10">has-background-grey-dark - #4a4a4a</p>
<p class="has-background-grey has-text-white p-10">has-background-grey - #7a7a7a</p>
<p class="has-background-grey-light has-text-white p-10">has-background-grey-light - #b5b5b5</p>
<p class="has-background-grey-lighter p-10">has-background-grey-lighter - #dbdbdb</p>
<p class="has-background-white-ter p-10">has-background-white-ter - #f5f5f5</p>
<p class="has-background-white-bis p-10">has-background-white-bis - #fafafa</p>

Floats and clearfix

You can use the class is-pulled-left or is-pulled-right to float blocks of content.

Floats will not clear their container. Please use in combination with the class is-clearfix.

<div class="is-clearfix p-10 has-background-info has-text-white">
    <div class="is-pulled-left p-10 has-background-success">
        Float left
    </div>
    <div class="is-pulled-right p-10 has-background-danger">
        Float right
    </div>
</div>

Content dividers and spacers

The <hr> element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.

Use is-large to add more spacing top and bottom and use spacer to add a horizontal rule with no colour.

<p>We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.</p>
<hr class="has-background-primary">
<p>We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.</p>
<hr>
<p>We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.</p>
<hr class="is-large">
<p>We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.</p>
<hr class="spacer">
<p>We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.</p>
<hr class="spacer is-large">
<p>We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.</p>

Usage

Accessibility

It is important that our web pages meet web accessibility standards, including the minimum contrast ratios that the WCAG 2.1 specifies for text and background colour combinations. This helps users who are colour blind or have low vision, but it also improves usability and readability for all users.

We aim to for text and background colour combinations to comply to WCAG 2.1 Level AA. To meet this, we should make sure that the colour contrast on body text is 4.5:1 and 3:1 on large text (24px). In order to meet the guidelines at the stricter Level AAA, the contrast ratio must be at least 7:1 (or 4.5:1 for large text).

Some users have difficulty reading text when there is not enough contrast between foreground and background colours. In order to meet the W3C Web Content Accessibility Guidelines 2.1 Level AA, colours should be tested before publishing content.

We have used the following tools and information to achieve compliance: