Content

Purpose

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

Description

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

Variants

Content width for mega font size

The a-content--mega modifier sets the font size of the block tomega, 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 themax-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 section, below).

-# 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.