Sections
These are various sections of the site which should always be placed in the Page component
Sections
Sections are sections of the page. These take the full width of the screen and are are placed inside of the main slot of the Page component.
The default option
To start with, there is one default section option. This can be widely used for any section you build. It have two options to enter content: inside of the section and inside of the container wrapper.
By default the section content is hidden, this can be used to enter a background image or any other item, that should be relative to the section, rather than the container.
The container content will contain the actual content of the page, which can include layouts, blocks and elements.
Adding Classes
Each Section Component has various custom classes options:
Section
Use classes that apply to the whole section. These could be classes such as background colour.
Spacing
Customise the spacing inside of the section. Most used could be to control the padding.
Layout
This will control the layout. Please see the Layout page to learn more about layout classes.
Custom Classes Overview
See all available classes to be entered in "Section" Custom Classes.
Background Colours
bg-color_[color]
Available classes
.bg-color_black
.bg-color_primary
.bg-color_grey-0
.bg-color_grey-1
.bg-color_highlight
Notes
The colours are being pulled from the variables. If these are updated, remember to update the name in the general custom code and the documentation.
Next up!
See the various Layout components you can use.
