A section is a full-width block of a page. Its padding adjusts at each breakpoint and its surface is white or grey.
How to add a section to a page. The file is components/css/section.css.
Link the shared stylesheet once per page. Never copy the rules into a page.
| Step | What to do |
|---|---|
| 1. Link | <link rel="stylesheet" href="/components/css/section.css">. Both templates already have it. |
| 2. Side margin | The page defines --px-full. The templates already do; a page without it has no side margin. |
| 3. First section | Add section--first to the first section after the breadcrumb. |
| 4. Surface | White is the default. Add section--secondary for a grey section. |
| 5. Zeroed padding | Add section--flush only for the five cases. |
Copy the markup you need.
| Class | Use |
|---|---|
section | The block: padding per breakpoint, white surface, sides var(--px-full). |
section--first | Less top padding. |
section--secondary | Grey surface. |
section--flush | Zero top and bottom padding. |
page-divider, page-divider__line | A line between two sections. |
main-content, page-preamble | The My Pages page title block. |
--px-full must be defined by the page. Use it, never --px-page, for a divider’s sides..section--first only; :first-of-type is not in the file.padding-top: 0; padding-bottom: 0 on the page divider.The component is one CSS file, shared by every page. Link it, never copy it. The CSS below is read from the file the page links, so it is always what you see.