Used to divide the page vertically
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 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.
Removes the 16px padding on the sides.
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.
Separate two simple (white) adjoining sections by a light grey line by adding the a-section--separated modifier to the first section element.
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.
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.
Sections that need to be stronger or more celebratory than Yellow use the
.a-section--cheer modifer to use a Pink background.
Used to highlight promotional sections, such as popular courses banner.
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 (
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
If the section has a background image, use the
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.