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

Page & block titles

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. This header can be added by using the header_page partial:

Page title

In what colour?

All page headers are in Dark Grey. For further information on the application of colour, visit the usage section in ‘Colours’

When within a course a header can be added by using the header_page_in_run partial:

Page title in course

Alternate 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. This header can be added by using the step-header molecule:

= molecule 'step-header', content: {step: step, enrolment: enrolment}

Block titles

Because of the underline, .header-large and .header-section should only be used when they contain a strong primary headline. For example, the sections on the course details page (watch the trailer, about the course and requirements) use the following header combination:

.header.header-section
  %h2.headline.headline-primary.headline-strong
    Strong primary headline

Which creates the following:

Strong primary headline

When do I use it?

For example, the sections on the course detail page (watch the trailer, about the course and requirements) use this header combination.

Item title

This atom is used for labelling objects or content blocks on the page. It's used for course titles, partner names, headlines, step titles on the to do page, or assessment titles on the progress page.

Font size

In the CSS the font size of item title is not fixed. It is inherited from its parent element. This way it is possible to set relative spacing on the parent that is relative to the font size.

This is an item title
%span.a-item-title This is an item title


Item title group (molecule)

This component groups a primary and a secondary item title. For the content the .a-item-title component should be used, with the --secondary modifier for the secondary title. An example use case is the step header where the primary element is the title of the course, and the secondary is the name of the partner.

Font size

Similarly to item title the font size of the text elements is not set on the level of this component. It should be set in the parent element’s style.

England in the time of King Richard III

University of Leicester

= molecule 'item-title-group',
           content: { primary_title: 'England in the time of King Richard III',
                      secondary_title: 'University of Leicester' }

Quotes

Quotes atom is used when quoting a person or representative of an organisation, for example it can be used for testimonials. First and last words of the paragraph are wrapped in the span elements. They determine whether quotes are facing up or down. First span element has 2em padding on the left and the second span element has 2em padding on the right. The size of quote image is relative to the size of text.

%p.a-quotes
  <span>Lorem</span> ipsum dolor sit amet. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla <span>pariatur.</span>

Block quote

We use block quotes on the site when quoting from a text, speech, script or transcript. The width of the hairline is 2px and in FL Pink, with the quote padding at 20px.

A passage from ‘The Canterville Ghost’

When Mr. Hiram B. Otis, the American Minister, bought Canterville Chase, every one told him he was doing a very foolish thing, as there was no doubt at all that the place was haunted. Indeed, Lord Canterville himself, who was a man of the most punctilious honour, had felt it his duty to mention the fact to Mr. Otis when they came to discuss terms.

Shout

Shout is a very prominent, loud, but short paragraph on the page. It can be used together with a longer copy, or on its own.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

%p.a-shout
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.

Stamp

A stamp is a short descriptive label that is associated with the parent element it describes, for example:

%span.a-stamp
  Starts 8 June

Stamp is always part of the parent element and doesn’t make sense on its own. The label in the stamp should be short, informative and provide important factual information, such as price, date, etc.

Compact stamp

Compact stamp is used when we want to show extra contextual information about content in an inline element.

Bill Murray Ghostbuster

%h4.comment-header
  %a{href: "#"} Bill Murray
  %span.a-stamp.a-stamp--compact Ghostbuster