Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Headings

We have three major heading styles on FutureLearn: article headings, block headings and headlines.

Article headings

Article headings are for long form text (that people “read”) where the headings might serve a sectioning role and introduce hierarchy.

They come in six responsive sizes:

h1: zetta
h2: tera
h3: mega
h4: uno
h5: micro
h6: nano

Normally we don’t need to create article headings explicitly, because heading tags within an article context (.a-text-context) will automatically become article headings. However, there are some cases where we do need to do it manually. For this, we created the .a-article-hx classes:

%h1.a-article-h1 Heading 1
%h2.a-article-h2 Heading 2
%h3.a-article-h3 Heading 3
%h4.a-article-h4 Heading 4
%h5.a-article-h5 Heading 5
%h6.a-article-h6 Heading 6

Block headings

Block headings are usually used for sections or larger blocks of the content. They do not have a sectioning role within the block and therefore they do not introduce hierarchy within that block. However, they have an important role of naming the sections, and indicating the structure of the page. This helps quick scanning and constructing a mental map of the page.

The class for a normal block heading is .a-heading. The HTML element is most likely a heading (<h1>, <h2>, <h3>, etc.). Here is how to do it:

%h3.a-heading Title

Block heading sizes

Block headings come in five sizes:

Extra large

bronto – Used only when the main title needs to be very prominent. Currently the course title on the Welcome page is the only extra large heading on FutureLearn.

Large

yotta – Used for page titles, page headers and billboards.

Normal

exa – This is the default heading style. Most common use is for the title of non-primary secions.

Small

tera – Used in smaller modules.

Extra small

mega

Here is how you can create headings in the markup:

%h2.a-heading.a-heading--exlarge Extra large
%h2.a-heading.a-heading--large Large
%h2.a-heading Normal
%h2.a-heading.a-heading--small Small
%h2.a-heading.a-heading--exsmall Extra small

Contrast

Some headings are related to a contrast setting:

Large

spacious – with uno body copy and spacious padding

Normal

normal – with uno body copy and normal padding

Extra small

compact – with uno body copy and cosy spacing

Examples:


Extra large heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Large heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Normal heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Small heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Extra small heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Spacing of block headings

The spacing around the heading is related to its font size – larger headings need larger “personal” space. This is 0.5em at the top, and 0.7em at the bottom.

Spacing between heading and block element

The bottom margin of block headings is designed for a following text elements (e.g. intro text, or other paragraph after the heading). When a block element follows the heading (e.g. a course list or grid), then the spacing should be slightly larger. This can be achieved with adding the .a-heading--before-block modifier:

%h3.a-heading.a-heading--before-block Title
.some-block-element

Centring block headings

Headings are left-aligned by default. Aligning them to the centre can be achieved in three different ways:

  • Set text-align: center on the parent module. This is the preferred way.
  • Add the .u-centered class to the heading module. Do this sparingly

Headlines

Headlines mark and label independent content blocks in a subtle way, without driving attention to the headline itself, allowing the content to stand out. They don’t introduce hierarchy, and if there are more blocks with headlines following each other, the order of these is not strict, unlike article headings.

= render partial: 'shared/molecules/headline', locals: {title: 'Innovation: The fashion industry'}
Innovation: The fashion industry
= render partial: 'shared/molecules/headline', locals: {title: 'Innovation: The fashion industry', secondary_title: 'University of Leeds'}
Innovation: The fashion industry
University of Leeds