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
Section & Content

Introduction

Our most basic layout elements are the section and content atoms. The main function of section is to divide the page vertically, while content atoms maintain the width of the content and the spacing around. In most cases they should be used together.

Concept of section and content atom

-# A simple example for the usage of section and content atoms
%section.a-section
  .a-content
    %h2 Popular online course categories
    %p
      Online learning offers a new way to explore subjects you’re
      passionate about. Find your interests by browsing our online
      course categories:

Section atom

The section atom is a very simple container. Its primary function is to divide the page vertically into self-contained sections.

-# A standard section container
%section.a-section

A section is a flexible container: it stretches from the left edge to the right edge of the canvas, and its height is set by the content by default.

This module also deals with the minimum padding around the content (so that the content never touches the edge of the viewport). There is a 16px padding on the sides by default. This can be removed by the a-section--without-bumpers modifier class:

-# Bumpers can be removed, however this is not recommended
-# in most cases
%section.a-section.a-section--without-bumpers

There is overflow: hidden set on the section to keep vertical margins of content containers inside the section block. If you want to move content out from the section, you can do that with the a-section--overflow modifier, which replaces the overflow: hidden setting with a clearfix:

-# Turn on overflow:
%section.a-section.a-section--overflow

Section style modifiers

You can indicate the separation between adjacent sections, highlight them with a distinct colour, or present a background image.

Separated

Separate two simple (white) adjoining sections by a light grey line by adding the a-section--separated modifier to the first section element:

-# Section with a separating border on its bottom edge
%section.a-section.a-section--separated
  .a-content
    %p.old-text-typescale
      An example of a Separated section.

An example of a Separated section.

Alternative

Present a section with a secondary or alternative style by using the .a-section--alt modifier. This will set the background to Gainsboro Grey.

-# Alternative section style
%section.a-section.a-section--alt
  .a-content
    %p.old-text-typescale
      An example of an Alternative section.

An example of an Alternative section.

Alternative Adjacent

If you need to use two Alternative sections next to each other, you can differentiate between them. Make one an Alternative Adjacent section by using the .a-section--alt-adjacent modifier. This will set the background to Light Grey.

-# Alternative Adjacent section style
%section.a-section.a-section--alt-adjacent
  .a-content.a-content--tight
    %p.old-text-typescale
      An example of an Alternative Adjacent section.

%section.a-section.a-section--alt
  .a-content.a-content--tight
    %p.old-text-typescale
      An example of an Alternative section next to an Alternative Adjacent section.

An example of an Alternative Adjacent section.

An example of an Alternative section next to an Alternative Adjacent section.

Strong

We present some sections highlighted with a Yellow background colour to make them stand out. This can be achieved by the a-section--strong modifier class.

-# Strong section style
%section.a-section.a-section--strong
  .a-content
    %p.old-text-typescale
      An example of a Strong section.

An example of a Strong section.

Cheer

Sections that need to be stronger or more celebratory than Yellow use the .a-section--cheer modifer to use a Pink background.

-# Cheer section style
%section.a-section.a-section--cheer
  .a-content
    %p.old-text-typescale
      An example of a Cheer section.

An example of a Cheer section.

Inverse

The inverse style changes the background of the section to Cool Grey, and the text to White. The modifier class for this style is a-section--inverse. This style is good for sections with dark background image (a-section--bg).

-# Inverse section style
%section.a-section.a-section--inverse
  .a-content
    %p.old-text-typescale
      An example of an Inverse section.

An example of an Inverse section.

Two tone

The two tone style adds a white strip at the top of the background, giving it the impression that the content is overflowing the container at the top. The modifier class for this style is a-section--two-tone.

-# Two tone section style
%section.a-section.a-section--alt-adjacent.a-section--two-tone
  .a-content
    .a-text-context.u-centered
      %img.m-inline-example__image{src: 'https://ugc.futurelearn.com/styleguide/molecules/spotlight-bg-mobile.jpg'}
      %h2 An example of a Two tone section.

An example of a Two tone section.

Background images

If the section has a background image, use the a-section--bg modifier:

-# Background images
%section.a-section.a-section--bg

This positions the background to the centre, sets the size to cover, and turns off repetition. It also adds subtle shadow to the text to improve readability. This style is independent from the background source setting, that should be done separately.

Content atom

The content atom deals with the alignment, width and spacing of the content block.

Here is an example for the most basic usage of content atom:

-# Content atoms and content atoms like each other
%section.a-section
  .a-content
    %h2 Popular online course categories
    %p
      Online learning offers a new way to explore subjects you’re
      passionate about. Find your interests by browsing our online
        course categories:

In the example above we created a section with a content container. The content atom’s width is limited to a size which results in ideal line lengths in paragraphs with uno font size. The block is aligned to the centre of the section container. There is also 2.5 units of spacing (margin) added to the top and the bottom of the block.

Keeping line length ideal

For readability, we want to keep the line length in body copy around 75 characters. With the Europa type face 32em gives us this ideal line length (32 times the font size). Therefore 32em is the width of normal content atoms.

As the width of the module is set with em unit, the actual width is always relative to the font size of the module. If the font size changes, the container width changes as well. This keeps the line lengths ideal.

If the font size of the content is different than the normal, you might like to adjust the type of the content atom to that font size (to get good line length). Currently the choice is limited to two font sizes: uno and mega.

Content width for uno font size

This is the default. The normal content atoms set the font size to uno, so the maximum width of the container is set to 32 * uno, which results in the following responsive widths: 512px, 648px and 729px.

Uno content width

-# Normal content width
%section.a-section
  .a-content

Content width for mega font size

The a-content--mega modifier sets the font size of the block to mega, which results in wider content block.

The responsive widths of the block are 648px, 820px and 923px.

Mega content width

-# Mega content width
%section.a-section
  .a-content.a-content--mega

Wide containers for grid lists and others

Grid lists are presented in a wide, responsive content container: Course page. This type is called a-content--hall. We also use this container when the layout is very wide on large viewports (like on the Healthcare Training page).

The responsive widths of the the block are 648px, 820px, 1038px and 1314px.

Hall content width

-# Very wide content container:
%section.a-section
  .a-content.a-content--hall

Form container

The container for forms is a narrow block with its width fixed to 340px.

Form content width

-# Form container
%section.a-section
  .a-content.a-content--form

Touching the edge

If you would like the content block to be strected from edge to edge, do that with the .a-content--stretched modifier. This removes the max-width setting and overrides the bumpers of the section atom.

-# Mega content width
%section.a-section
  .a-content.a-content--stretched

Spacing

There are a limited number of spacing modifiers to adjust the vertical margin around content atoms: normal, spacious, cosy (currently called tight) and contiguous. These spacing modifiers should be applied in combination with certain heading sizes (see usage patterns).

-# Normal spacing (2.5 units)
.a-content

-# Spacious spacing (3.5 units)
.a-content.a-content--spacious

-# Cosy spacing (1.5 units)
.a-content.a-content--tight

-# No spacing
.a-content.a-content--contiguous

Multiple content atoms in a sections

This is possible and recommended if the line length of some elements should be different in the same section. You need to set the spacing between the content containers manually (with the spacing modifiers).

-# Multiple content atoms in one section
%section.a-section
  .a-content.a-content--mega.a-content--contiguous-bottom
    %h2 Popular online course categories
  .a-content.a-content--contiguous-top
    %p
      Online learning offers a new way to explore subjects you’re
      passionate about. Find your interests by browsing our online
      course categories:

Usage patterns

There are patterns in how we use typography and spacing within sections. There are four main section types based on the typographic contrast (proportion of heading to body copy), top and bottom spacing (spacious, regular, and cosy).

Spacious

Typographic contrast: high (Yotta + Uno)
Spacing: spacious

Mega content width

We normally use Spacious modules for promotional purposes, when we need to make a module particularly prominent on the page.

Examples of Spacious modules: Billboard.

Normal

Typographic contrast: high (Exa + Uno)
Spacing: normal

Mega content width

The majority of sections on FutureLearn are Regular.

Compact

Typographic contrast: high (Mega + Uno)
Spacing: cosy

Mega content width

We tend to use the Compact type for module with a supporting function (such as supporting promotional elements).

Examples of Compact modules: Standfirst, Spotlight.

Compact Fixed

Typographic contrast: high (non-responsive Tera + Uno)
Spacing: cosy

Mega content width

We tend to use Compact Fixed modules in multi-column layouts, when responsive typography doesn’t benefit the design because of the optimal line length.

Examples of Compact Fixed modules: Signpost.