Section
The <Section> tag is required for all components. It is a block-level tag that renders as an element in the outputted HTML.
<Section dataRef={content.section} enableHeader={true}>
...
</Section>
Attributes
- dataRef: DataLocator - 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 left 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.