Section

The <Section> tag is required for all components. It is a block-level tag that renders as an element in the outputted HTML.

Attributes

The <section> tag has the following attributes:

Attribute	Type	Required	Description
dataRef	DataLocator	Required	The data-element storing the section's configuration.
className	string	Optional	A hard-coded class name to add to the rendered element (Default: none).
defaultPaddingTop	number	Optional	A number from 0-10 indicating the default top padding of the Section Box-Wrapper (Default: 8).
defaultPaddingRight	number	Optional	A number from 0-10 indicating the default right padding of the Section Box-Wrapper (Default: 2).
defaultPaddingBottom	number	Optional	A number from 0-10 indicating the default bottom padding of the Section Box-Wrapper (Default: 8).
defaultPaddingLeft	number	Optional	A number from 0-10 indicating the default right padding of the Section Box-Wrapper (Default: 2).
defaultMaxWidth	number	Optional	A number indicating the default max width in px of the Section Box-Wrapper (Default: 1200).
defaultTextAlignment	string	Optional	A string ("left", "right", or "center") indicating the default alignment of the Section Box-Wrapper (Default: "center").
defaultTextTheme	string	Optional	A string ("dark-bg" or "light-bg") indicating the default text theme to use for the component.
defaultBackgroundColor	string	Optional	A CSS color value indicating the default background color (Default: none).
enableHeader	boolean	Optional	When true, allows content authors to add a section-header to this section type (Default: false)).
location	array/string	Optional	Where the component can appear; can include 'header', 'main', and 'footer' (Default: ['main']).
properties	array/object	Optional	Defines properties that content authors can configure within the page editor. For details see custom properties.

Example

An example of the section tag is shown below.

<Section dataRef={content.section} enableHeader={true}>
...
</Section>