The content atom deals with the alignment, width and spacing of the content block.
content atom deals with the alignment, width and spacing of the content block.
Here is an example for the most basic usage of
-# 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
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:
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:
-# Normal content width %section.a-section .a-content
Content width for mega font size
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
-# 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
-# Very wide content container: %section.a-section .a-content.a-content--hall
The container for forms is a narrow block with its width fixed to
-# 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
There are a limited number of spacing modifiers to adjust the vertical margin around content atoms:
cosy (currently called
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:
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).
Typographic contrast: high (Yotta + Uno)
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.
Typographic contrast: high (Exa + Uno)
The majority of sections on FutureLearn are Regular.
Typographic contrast: high (Mega + Uno)
We tend to use the Compact type for module with a supporting function (such as supporting promotional elements).
Typographic contrast: high (non-responsive Tera + Uno)
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.