This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

Banner

A full-width, almost full-height display with a header, description, and call to action overlaid on an image. Also known as “Hero Banner”.

    Screenshot of the Banner component with block labels


    Designs:

    To use the block:

    • Click the Layout tab at the top of your page
    • Scroll to the location on the page where you want to add a block
    • Click Add block
    • In the sidebar, click Create custom block
    • Choose the block to add.

    Fill in the content fields:

    • Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
    • Banner Title (required): A heading to display on the banner.
    • Description: A full text editor to add banner content.
    • Media: Chose from the library or add a new image or icon to be displayed behind the banner text.
    • CTA/Link: A link at the bottom of the banner text.

    This block comes with multiple styles. To choose an alternative style:

    1. Click on the Style tab at the top of the Block Add/Update form.
    2. Expand the Y Style section.
    3. Choose from the available variations.
    4. Go back to the Content tab.

    Banner variants

    Then save the block: