Section Overview

Sections are used to separate the content of a page into differently styled blocks.

Basics Settings

Show
Select one of the following options to show the section for screens larger than the specified width.
Hidden
Select one of the following options to hide the section from screens larger than a specified width.
HTML Tag
Set an HTML Tag for your section.
ID
Define one or more id names for the section.
Class
Define one or more class names for the section. Separate multiple classes with spaces.

Container Settings

Section full width?
Yes or No. (Learn more)

Grid Settings

Grid: Match height
Yes or No.
Grid Gutter
The Grid component comes with a default gutter that is decreased automatically from a certain breakpoint usually on a smaller desktop viewport width.
Grid Divider
Yes or No. Choose 'Yes' to separate grid cells with lines. This option can be combined with the gutter modifiers. As soon as the grid stacks, the divider lines will become horizontal.

Title/Subtitle Settings

Title Show
When set to 'Yes', this option will enable Title and or Subtitle in front-end.
Section Title
Enter text which will display as a section title.
Title HTML Tag
Choose a HTML-Tag for the title.
Font Size
Set Title font size for this selector.
Font Weight
Set Title font weight for this selector.
Title Style
Choose a title style modifier.
Title Color
Choose a Title color.
Subtitle
Insert text which will display as a section subtitle (short description).
Subtitle HTML Tag
Choose a HTML-Tag for the subtitle.
Subtitle Font Size
Set Subtitle font size for this selector.
Subtitle Style
Choose a subtitle style modifier.
Subtitle Weight
Set subtitle font weight for this selector.
Heading Alignment
Choose a type of text alignment for title and subtitle.
Use SVG Title/Subtitle?
When set to 'Yes', this option will enable SVG Title and or Subtitle style in front-end.
Use Stroke Title?
Yes or No.
Use Stroke Subtitle?
Yes or No.

Background Settings

Custom Background
When set to 'Yes', you can set different background options. (Background images, different Blendmodes, Custom color).
When set to 'SVG', you can use your own SVG backgrounds. (Learn more)
Background
Choose a default background option.
Inverse Color
Select the 'light' class to improve the visibility of objects on dark backgrounds in a light style. When using a dark style, add the 'dark' class to elements on a light background.
The 'Primary' and 'Secondary' (Background Settings) option are extending the inverse style from the Inverse component automatically. If you want to prevent this behavior, for example because you are using cards in these sections, add this 'Preserve color' option.

Style Settings

Content align vertical?
Yes or No.
Load Components?
Yes or No.
Viewport Height
Yes or No.
Section Padding
Choose a default padding for the section.
Use Section Margin?
Choose a margin for the section.
Divider in Front?
Place the svg shape above section content.
TOP SVG Divider?
Choose a top SVG Divider.
Mirrored?
Yes or No. To mirror the top divider choose 'Yes'. Note: You cannot mirror all svg shapes.
Divider Drop Shadow Top?
Yes or No.
Use Gradient?
Yes or No.
Color
Set a SVG-Divider top fill color.
SVG Divider Top Height
Set SVG shape height in pixel.
Bottom SVG Divider?
Choose a bottom SVG Divider.
Mirrored?
Yes or No. To mirror the bottom divider choose 'Yes'. Note: You cannot mirror all svg shapes.
Divider Drop Shadow Bottom?
Yes or No.
Use Gradient?
Yes or No.
Color
Set a SVG-Divider bottom fill color.
SVG Divider Bottom Height
Set SVG shape height in pixel.

Animation Settings

Scrollspy Animation
The Scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears in the viewport for the first time, you can trigger a smooth animation to fade in the element.
Responsive
Add a number in pixel, e.g. 640, or a breakpoint, e.g. @s, @m, @l or @xl. The parallax will be shown for the specified viewport width and larger.
Use Parallax Title Animation?
Yes or No. (Learn more)
Use Parallax Subtitle Animation?
Yes or No.
Background Image Parallax?
Yes or No.