Skip to main content

Banner Section

When to Use

This should be the first or second section on the page because the title uses an H1 tag. Each web page should have only one H1 tag and it should be the first H tag on the page.

We recommend avoiding this section because it places text and a call to action (CTA) button over an image, which makes the text and CTA difficult to read. This issues can be mitigated with a simple (not busy) background image or adding a dark overlay between the background image and the text.

The alternative is the Slide Show Section, which also uses an H1 tag, or a Markdown Section which allows you to use any tag(s).

Data Structure

Position
Where the section appears in the order of all page sections.

Class
The class name of the section element for styling purposes.

Title
This is an H1 tag.

Subtitle
Text below the title that uses a P tag.

Button Text The text for the CTA button

Button Path The pathname of the page clicking the CTA button links to

Button Class See the available button classes (coming soon).

Alt Button Text The text for the alternate CTA button that will appear in the bottom right corner of the section as a link. This might link to the item that is displayed in the background image of this section. Optional.

Alt Button Path The pathname of the page clicking the CTA button links to

Alt Button Class See the available button classes (coming soon).

Examples