Section
The section component is the most fundamental building block of the site. You will want most other content to be contained within a section.
A section has the following features:
- The background, which extends across the full screen.
- The content, which is locked into a fixed size, dependent on the user’s screen width.
- Automatic padding at top and bottom.
- The ability to have as many child elements as required. All component types are available to be used inside a section.
Available settings
Section titled “Available settings”Inner components
Section titled “Inner components”Type: all components
Add content or other page-building structures to the page.
Background colour
Section titled “Background colour”Type: dropdownOptions: predefined per-site
Set the background colour from a list of pre-defined constants that are in line with the site’s brand.
Override background colour
Section titled “Override background colour”Type: checkbox
Default: unchecked
Set the background a different colour to those in the default pre-defined list. Only available to site administrators.
Disable top padding
Section titled “Disable top padding”Type: checkbox
Default: unchecked
Remove the default padding from the top of the section.
Disable bottom padding
Section titled “Disable bottom padding”Type: checkbox
Default: unchecked
Remove the default padding from the bottom of the section.
Background image
Section titled “Background image”Type: group
Type: file
Browse for an image on your computer or the site’s content delivery network (CDN).
Image position
Section titled “Image position”Type: dropdown
Options: left | right | full width
Choose whether the image spans the full width of the page, with the content appearing on top of it, or whether it takes up the left 50% of screen or the right 50% of screen.
Image position on mobile
Section titled “Image position on mobile”Type: dropdown
Options: before content | after content
Choose whether the image comes before or after the rest of the content when seen at mobile sizes. This only works for a background image with image position set to left or right.
Caption
Section titled “Caption”Type: plain text
Add a very short description to provide context to the image, with no full stop at the end.
Credit
Section titled “Credit”Type: plain text
Add the photographer’s name and the source if required, with no full stop at the end, e.g. Dan Smith/AFP via Getty Images
Caption position
Section titled “Caption position”Type: dropdown
Options: left | right
Choose whether the caption shows to the left or right of the background image.
Caption background colour
Section titled “Caption background colour”Type: dropdown
Options: dark | light
Choose whether the caption is on a dark or a light background (exact colours will be set per-site).