Section

Purpose

Used to divide the page vertically

Description

One of bost basic layout elements is the section (along with  content) atom. The main function of section is to divide the page vertically, (while content atoms maintain the width of the content). In most cases they should be used together.

Section

%section.a-section 

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 a16px padding on the sides by default. 

Variants

.a-section--without-bumpers

Removes the 16px padding on the sides.

.a-section--overflow

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.

.a-section--separated

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

A Section Alt

.a-section--alt


A Section Alt

.a-section--alt-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.

A Section Alt Adjacent

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

A Section Strong

.a-section--cheer

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

A Section Cheer

a-section--promo

Used to highlight promotional sections, such as popular courses banner.

A Section Promo

.a-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).

A Section Inverse

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

A Section Two Tone

.a-section--bg

If the section has a background image, use the a-section--bgmodifier.

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.