Banner

The Banner block puts a prominent opener at the top of a page: a large heading with optional supporting text and call-to-action buttons, shown over a background image or video, or beside a piece of media. Reach for it as the first thing a visitor sees: a homepage opener, the top of an about page, or the headline of a campaign.

Details

• Prefix: small text shown above the heading, such as a category or a short lead-in.
• Title: the main heading. Required. Type it yourself or use the field's source picker to insert a value from the current page.
• Subtitle: longer supporting text shown below the heading. It supports the same page-value picker.
• Links: add one or more call-to-action buttons or links. Each can carry an icon. See Buttons and links.
• Media: the image shown alongside the text. Appears in the Split style only.

Choosing the style

The block has two styles, picked at the top of the block. Welcome is the default.

Welcome

Text sits over a full-width background image or video, set on the Background tab. Turn on Background Media, then either keep Use Page Media on to reuse the page's own main image or turn it off to choose your own. A Media Overlay keeps the text readable over the background, and a Content Background panel can sit behind the text itself. See Background and overlay for the full set of options.

Split

Text on one side, a piece of media on the other. Set the image in the Media field under Details. The background-media options are hidden in this style; placement is handled by the Media group on the Layout tab:

• Placement, where the media sits: Top, Bottom, Left, or Right (default).
• Width: how much width the media takes when placed left or right: 1/4, 1/3, 1/2 (default), 2/3, or 3/4.
• Height: the same fraction for media placed top or bottom. Default 1/2.
• Full Bleed Media: let the media run to the edge of the block. Off by default.

Sizing the text

The Layout tab gives each text element its own controls.

• Prefix has a Size (Small, P, H6, H5, or H4; default H5).
• Subtitle has a Size (Small, P, H6, H5, or H4; default H5) and a Width / Max Width.
• Title has a Size group. Choose Pixel for an exact size (8–300px, default 48px) or Percent for a size that follows the height of the browser window (1–30%, default 8%). Turn on Custom mobile size for a separate phone value (default 32px or 5%). Title Style is Bold by default and can also use Italic; Width and Max Width control the text column.
• Buttons has its own layout group for the direction, alignment, and spacing of the button row.

The tab also sets the overall banner Height (default Medium), Direction, Alignment (default Left), and Position of the content within the banner (default Bottom). See Layout controls.

Shared controls

Beyond the options above, the Banner uses the standard block controls.

• Background and overlay: set the background image or video and the overlay that keeps text readable (Welcome style).
• Layout controls: set the banner height, alignment, and content position.
• Buttons and links: build and style the call-to-action buttons, including their icons.
• Spacing and padding: adjust the margin and padding around the block. The banner starts with 70 px of top and bottom padding.
• Colour scheme in blocks: set the colours used for text and panels.

Example

For a homepage opener, add a Banner and keep the Welcome style. Type a one-line Title and a short Subtitle, and add a single Plan your visit button. On the Background tab, turn on Background Media, leave Use Page Media on so the banner reuses the page's main image, set Media Overlay to Color, choose Gradient for the Overlay Style, and set the Gradient Direction to Up so the text reads clearly against the bottom of the image. Leave Position at Bottom so the heading sits low over the artwork.

Where to go next