Sections

Notes:

Sections are the top level grouping mechanism in documents, think of them as containers for a set of default content and blocks. Learn more about the Document Structure here.

Sections are separated by “Horizontal Rules” or — to group certain elements of a page together. There may be both semantic and design reasons to group content together, a simple case could be that a section of a page has a different background color.

Technically a section just introduces a <div> wrapper in the markup delivered around all the blocks and default content contained in the section.

Example:

See Live output

Content Structure:

See Content in Document

Code:

In most cases generic sections don’t have much styling code beyond project specific box layout (eg. margins, padding, max-width) and are sometimes augmented with section metadata to control styling (often background colors or images).

See Section Styling Code