vdl-section
A container for a section of content on the page. Each section can have a fixed (default) or fluid layout. Content within a <vdl-section> will be in its own horizontal block with padding at the start and end. Each section can have a heading and a custom width.
Required parent element
Must be contained within one of the following elements:
Example
<vdl-section heading="Section 1">
<!-- Any VDL, HTML or text content -->
</vdl-section>
<vdl-section heading="Section 2" heading-level="5">
<vdl-row>
<vdl-column>
<!-- Any VDL, HTML or text content -->
</vdl-column>
</vdl-row>
</vdl-section>Attributes
| heading | Adds a heading title to the section. | accepts expression | |
|---|---|---|---|
| heading-level | If specified can alter the size of the heading. Uses the same numbers (1-6) as the HTML heading tag. Defaults to size 2. | ||
| layout | Switch the section into fluid layout by setting this to the value "fluid". With fluid layout the width attribute is ignored as the section will expand with the window size. Default behaviour is "fixed" layout. | ||
| width | Specify the width, in pixels, for the section. Only relevant for the default, fixed layout mode. |
Element contents
Markup allowed
Any VDL, HTML or text content