Utilities

Alignment

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

Preview
Code

Text centred

Text aligned left

Text aligned right

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

Text weight

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

Preview
Code

has-text-weight-light

has-text-weight-normal

has-text-weight-medium

has-text-weight-semibold

has-text-weight-bold

<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:

Preview
Code

is-size-1

is-size-2

is-size-3

is-size-4

is-size-5

is-size-6

is-size-7

<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>

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.

Preview
Code

Float left Float right

<div class="is-clearfix p-10 has-background-light has-text-dark">
    <a href="#" class="is-pulled-left p-10 button brookes-primary">
        Float left
    </a>
    <a href="#" class="is-pulled-right p-10 button brookes-secondary">
        Float right
    </a>
</div>

Content dividers

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

Preview
Code

Default light grey: We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.

Primary yellow: We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.

Black: We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.

Dark grey: We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.

Primary yellow: We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.

Black: We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.

Default light grey: We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.

Primary yellow: We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.

Black: We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.

<div class="has-background-white p-20 m-bottom-20">
    <p><strong>Default light grey:</strong> We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.</p>
    <hr>
    <p><strong>Primary yellow:</strong> We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.</p>
    <hr class="has-background-primary">
    <p><strong>Black:</strong> We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.</p>
    <hr class="has-background-black">
</div>
    <div class="has-background-light p-20 m-bottom-20">
    <p><strong>Dark grey:</strong> We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.</p>
    <hr class="has-background-grey">
    <p><strong>Primary yellow:</strong> We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.</p>
    <hr class="has-background-primary">
    <p><strong>Black:</strong> We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.</p>
	<hr class="has-background-black">
</div>
<div class="dark-background p-20 m-bottom-20">
    <p><strong>Default light grey:</strong> We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.</p>
    <hr>
    <p><strong>Primary yellow:</strong> We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.</p>
    <hr class="has-background-primary">
    <p><strong>Black:</strong> We plan to reserve a number of rooms in university accommodation for students joining us through Clearing.</p>
    <hr class="has-background-black">
</div>