Headings

Purpose

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

Description


Variants

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

Screen Shot 2018 05 17 At 16 21 40

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, and0.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'}

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

Headlines