Section
A section is an extensible content container which displays the main content of the page.
Variations
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Component used in
Details
Usage
Sections provide structure to a page. Despite the fact that this component is not a mandatory, it is one of the most used components.
Guidelines
- Avoid its use to feature solely a heading tag (
h2,h3,h4,h5orh6) - Do not add it before a title or intro component
- Do not add it after a see also boxes or explainer box component
- Can be added multiple times to a page
HTML structure
Overall HTML view of a section component:
div.section
h2, h3, h4, h5, h6 (optional | one or more)p (one or more)
a, strong, em (optional | one or more)h2, h3, h4, h5, h6, p, a, ul, ol, dl, img (optional | one or more in any order)Nesting element might significantly affect the HTML markup.
Presets
Section presets:
| Preset | Description |
|---|---|
| Default | Default preset. |
Variations
Section variations:
| Variation | Description |
|---|---|
| One paragraph, Two paragraphs, One heading and one paragraph, Two headings and two paragraphs | The most flexible of all components. The options are multiple, only the HTML semantic should respect the best practices. |
Modifiers
Section classes:
| Class | Description |
|---|---|
-light-grey | Adds a background color to the container. Whenever you need to highlight one or more paragraphs you can add this class, to do this you'll need to split the content in different section components. |
To enable a modifier, add it as a class to the outermost element of this component.
Embedding
The section component cannot be embedded inside other component.
main (HTML file)
div.sectionNesting
The large box component can be used as a container of other components and/or elements (a nested component becomes an element of the parent component):
| Element | Description |
|---|---|
| Definition list | Whenever a definition list is more suitable for a section. |
| Figure | Whenever you need to add an image or chart. |
| Quote | Whenever you need to pull a quote or enhance a block of text. |
| Video | Whenever you need to add a link directly in the section. |
| Links | Whenever the content needs to redirect the user. |
| List | Organise your content in form of bullet points. |
| Table | Whenever the table content is suitable for a section. |
main (HTML file)
div.section (component)
Elements are component add-ons which can be placed directly inside the component allowing you to adapt the HTML structure to your needs. The correct markup can be checked in the element page.