Layout
Section
The highest level block element on the page, direct child of the page element.
Elements
The component is composed of multiple elements:
sectionthe wrappersection__containera second wrapper, used for responsive stylingsection__headerthe header elementsection__labeloptional caption element (text style is automated)section__titlethe title element (text style is automated)section__subitleoptional subtitle (text style is automated)
section__contentsome content (section can have multiple instances of that element)
<div class="section">
<div class="section__container">
<div class="section__header">
<p class="section__label">Section label</p>
<h1 class="section__title">Section title</h1>
<p class="section__subtitle">Optional section subtitle</p>
</div>
<div class="section__content">
<p>Here you can add whatever you want</p>
</div>
<div class="section__content">
<p>And duplicate the element at will</p>
</div>
</div>
</div>Section label
Section title
Optional section subtitle
Here you can add whatever you want
And duplicate the element at will
Properties
Add classes to the wrapper class to change the style of the component.
Alignement
Changes the alignement of the section.
class="section"
Default
Align left
Align all content and text to the left
class="section section--center"
Align center
Align all content and text to the center
class="section section--right"
Align right
Align all content and text to the right
Fill
Changes the fill color of the section.
class="section section--default"
Default
Background default
Use the $background-default variable as background color
class="section section--paper"
Background paper
Use the $background-paper variable as background color
class="section section--primary"
Background primary
Use the $background-primary variable as background color
class="section section--primaryLight"
Background primary-light
Use the $primary-light variable as background color
Landing
Add the modifier class section--landing to automatically style the header for the website title on the homepage.
class="section section--landing"
Section landing
Optional section subtitle
Landing
Add the modifier class section--header to automatically style the header for the page title (first section of the page).
class="section section--header"
Section header
Optional section subtitle