Layouts
Here you can find a list of all the available layouts to add to the Section
Layouts
A layout component is a reusable element designed specifically to handle the structural organisation of your content using layout techniques like Flexbox or Grid. These components serve as the foundational building blocks for your page design, allowing you to arrange and align content in a flexible, responsive manner.
3 options
Similarly to the Sections, there are three different Section Components that you can choose from:
- Layout - Grid
- Layout - Flex
- Layout - Center
The Layout - Grid will follow a grid structure.
The Layout - Flex follows Flexbox wrapping contents. Majority of the time the elements inside will need a maximum width to avoid expanding to the whole width.
Finally, the Layout - Center centers all of the content both vertically and horizontally including centering text.
Adding Classes
By adding classes to the Layout components, you can efficiently create complex, responsive designs by defining how elements should be positioned and distributed within a container. This ensures consistent spacing, alignment, and order across different screen sizes, making it easier to manage and maintain a cohesive layout throughout your website.
Layouts are the components with the most available classes, which we will cover in more detail below.
Gap
In all layouts, Grid ,Flex and Center, you can define the size of the gap between elements. This will assume the gap for columns and rows is the same. To define the gap add the class with the prefix gap_ and add any of the four sizes small, medium, large, huge.
Try it!
Below you have a Layout - Grid component. Try changing gap_small to gap_ large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Try it!
Below you have a Layout - Flex component. Try changing gap_tiny to gap_ medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Class structure
gap_[size]
Available classes
gap_small
gap_medium
gap_large
gap_huge
Notes
If using the Main Wrap, remember some children elements might need a max width.
Columns
With the Layout - Grid layout you can define the number of columns by adding the prefix col_ followed by three numbers defining the number of columns for desktop, tablet and mobile respectively.
Try it!
Below you have a Layout - Grid component. Try changing col_421 to col_221. You can also change breakpoints to see how the column property changes it through the different breakpoints.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Class structure
col_[###]
Available classes
col_442
col_422
col_421
col_331
col_321
col_311
col_221
col_211
Columns sizes
With the Layout - Grid layout you can define the size of individual columns by adding the prefix col-size_ followed by the number of the column you are targeting and any of the three sizes small, medium, large.
Try it!
Below you have a Layout - Grid component. Try changing col-size_1-large to col-size_2-large.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Try it!
You can also combine the two, for example col-size_1-large and col-size_ 2-medium.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Class structure
col-size_[#]-[size]
Available classes
col-size_1-small
col-size_1-medium
col-size_1-large
col-size_2-small
col-size_2-medium
col-size_2-large
col-size_3-small
col-size_3-medium
col-size_3-large
col-size_4-small
col-size_4-medium
col-size_4-large
Alignment
With both Grid and Flex layouts you can define the alignment of the children elements.
By adding the prefix align_ followed by the direction (v or h) and position, you can control how the elements sit inside of the layout.
Try it!
Below you have a Layout - Grid layout, try changing align_v-top to align_v-bottom.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum
Try it!
Below you have a Layout - Flex layout, try changing align_h-center to align_h-right.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Class structure
align_h-[target]
align_v-[target]
Available classes
align_h-left
align_h-center
align_h-right
align_h-opposite
align_v-top
align_v-center
align_v-bottom
align_v-opposite
Notes
By default the layouts are set to stretch in both directions.
The align opposite, will only work with the Main Wrap layout.
Direction
Only works with the Flex layouts you can define the direction of the children elements throughout the breakpoints.
By adding the prefix d_ followed by the directions [h] and [v] for the three breakpoints desktop, tablet and mobile respectively.
Additional direction options include reverse direction for tablet and mobile, which can be used with both Flex and Grid as long as it only has one column.
Add d_alternate to alternate the content, can only be used with Flex.
Try it!
Below you have a Layout - Flex layout, try changing d_hvv to d_hhv and see how this affects the different breakpoints.
1. Step
2. Step
3. Step
Class structure
d_[hxx]
d_alternate
d_reverse-[breakpoint]
Available classes
d_hhv
d_hvv
d_alternate
d_reverse-tablet
d_reverse-mobile
Notes
d_[hxx] will only work with Main Wrap. When added you are overwriting the wrap element of the flex box.
Alternate will only work with Main Wrap and has to be set to the parent div.
Reverse will work with Main only is the column is set to 1.
Custom Classes Overview
See all available classes to be entered in "Layout" Custom Classes.
Gap
gap_[size]
Available classes
gap_small
gap_medium
gap_large
gap_huge
Notes
If using the Main Wrap, remember some children elements might need a max width.
Columns
col_[###]
Available classes
col_442
col_422
col_421
col_331
col_321
col_311
col_221
col_211
Notes
The numbers represent the number of columns for desktop, tablet and mobile.
Column Size
col-size_[#]-[size]
Available classes
col-size_1-small
col-size_1-medium
col-size_1-large
col-size_2-small
col-size_2-medium
col-size_2-large
col-size_3-small
col-size_3-medium
col-size_3-large
col-size_4-small
col-size_4-medium
col-size_4-large
Notes
The number represent the column you are targeting.
Alignment
align_h-[target]
align_v-[target]
Available classes
align_h-left
align_h-center
align_h-right
align_h-opposite
align_v-top
align_v-center
align_v-bottom
align_v-opposite
Notes
By default the layouts are set to stretch in both directions.
The align opposite, will only work with the Main Wrap layout.
Direction
d_[hxx]
d_alternate
d_reverse-[breakpoint]
Available classes
d_hhv
d_hvv
d_alternate
d_reverse-tablet
d_reverse-mobile
d_wrap
Notes
d_[hxx] will only work with Main Wrap. When added you are overwriting the wrap element of the flex box.
Alternate will only work with Main Wrap and has to be set to the parent div.
Reverse will work with Main only is the column is set to 1.
Next up!
See the various spacing classes you can use.
