Section
Last updated
Last updated
The section Block generates an HTML section element with various customizations based on the values of the section
object passed to the template. This section generates Bootstrap Columns and be adjusted based on the column section of each block
The general idea behind Section blocks is that you can add any content in here, but follow Semantic HTML.
The section's tag name is either section
or the section.html_tag
in the fields if you have it set. The Advanced Tab fields also add an ID attribute and CSS Classes that you specify. You can also adjust the Bootstrap container type as well in this tab.
You can set a background to a section by going under the Background Image Tab.
You can also adjust the spacing before and after using the switches from section.disable_top_spacing
, and section.disable_bottom_spacing
respectfully.
The section element contains a row
element with a class
attribute set to row-cols-lg-
followed by the length of section.columns
and is dynamically set by the number of column blocks, as well as additional classes to set the row's direction on mobile devices based on the value of section.reverse_columns_on_mobile
.
For each column
block in section.columns
, the template generates a Bootstrap Column and adds spacing unless column.disable_bottom_spacing
is true, as well as additional classes based on the values of column.position
, and column.width
. The Bootstrap Column will contain content that depends on which column block you add.
You can view more about each column block by browsing each block below:
Block
Block
Block
Block
Block
Block
Block
The following files are used to display this content
which is used in the blueprint file
file
file
partial file