Page and block titles

Purpose

Page and block titles provide a hierarchy of the information on the page.

Example

Page Title

Description

All pages should have a page title header. Try to use one of the following partials (rather than building it up using the previous classes). All these headers have a fixed bottom margin (3.5rem on tablet/desktop, 3rem on mobile); whatever follows next should not have any spacing above it.

The default page header is used on most public pages, displaying an icon and a page title.

All page headers are in Dark Grey. For further information on the application of colour, see 'Colours'.

When course title and partner name are grouped together, the partner name should be in Medium Grey, to provide enough contrast with the course title. There is an exception if the they appear on Gainsboro Grey background (e.g. Related courses)—in that case partner name should be the same colour as the course title (Cool Grey), in order to meet accessibility requirements.

When on a specific step, the page header shows that step’s number and whether or not the learner has completed it.

Variants

Block titles

Because of the underline, .header-large and .header-sectionshould only be used when they contain a strong primary headline, for example the headers for the comments section.

Strong Primary Headline

Added by: