Back to the pattern library

Scale

All of our spacing is derived from multiples of 8px. This is our baseline grid. This baseline allows us to space our text, images or any other page elements using these values.

More detailed information on how to use our typography can be found in our design guidance.

Example

Example

HTML

<h1>Heading mega</h1>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

<p class="coop-intro-text">NaN</p>

<p>Paragraph</p>

SCSS

The styles for this pattern can be found in the foundations on github.

JS

There is no javascript needed for this component.

Design and content

Size, line height and spacing above 768px
Size Line height Spacing
Mega 60px 83px Top 32px
Bottom 32px
H1 46px 64px Bottom 32px
H2 26px 40px Bottom 8px
H3 22px 32px Top 8px
Bottom 8px
H4 22px 32px Top 8px Btm 8px
H5 22px 32px Top 8px
Bottom 8px
H6 16px 24px Top 0px
Bottom 4px
P lead 26px 42px Bottom 8px
Paragraph 20px 32px Bottom 32px
Size, line height and spacing below 768px
Size Line height Spacing
Mega 36px 50px Top 16px
Bottom 16px
H1 30px 42px Bottom 16px
H2 20px 31px Bottom 4px
H3 18px 31px Top 4px
Bottom 4px
H4 18px 31px Top 4px
Bottom 4px
H5 18px 31px Top 4px
Bottom 4px
H6 13px 20px Top 8px
Bottom2px
P lead 20px 34px Bottom 4px
Paragraph 16px 27px Bottom 16px

Accessibility

We are currently working on this.

For more information see our general guide on accessibility.

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change