The 'Banner' block is typically placed at the top of a page. Its purpose is to grab the attention of a page viewer. It displays a title, excerpt, and link text over a background image. Make sure to select a high quality image that directly relates to the content of that page. The link text should be descriptive and signify where the user will be directed upon clicking the link.

Title

Provide a descriptive headline for the banner block.

Size

You have the ability to select the heading level of the title. Heading 2 is set by default, but may need to be adjusted depending on where you nest the banner block within the page. 

Excerpt

The 'Excerpt' field is optional. The default Banner block displays the excerpt text directly below  the 'Title' field. It should be descriptive and directly relate the Banner block to the page.

Link

The 'Link' field is optional. This field gives you the option of adding a button with a clickable link below the banner 'title' and 'excerpt'.

URL

In the 'URL' sub-field, enter a link to a website or internal URL.

Link text

In the 'Link text' sub-field, enter what the button should display on the page.

Background

In the 'Background' sub-field, there are many options to customize the banner block.

Image or Video: You have the option to display an image or a short looping video for the banner block background. 

NOTE: Image Specifications documentation.

NOTE: Videos must be in .mp4 format and under 10 MB. Background videos are meant to be decorative and not a source of information.

NOTE: Only webmasters have the ability to upload videos for use with the banner.

Selecting a video will also offer an autoplay option. Keep in mind enabling autoplay can trigger vestibular disorders. Users can control the autoplay by changing their computer to "reduce motion" or by pausing the video which remembers their preference with a browser cookie.

A placeholder image will be generated by the first few frames of the video.

Background color options: Black, White, Brain Pattern, Brain Pattern Black, Brain Pattern Reversed, Gray and Gold.

Display Options

The 'Display Options' field offers customizability to the banner block.

Content position: Select which position the banner will be aligned to.

  • Left aligned and centered vertically: The content will be centered on the left side of the block
  • Left aligned horizontally and bottom-aligned vertically: The content will display on the left side at the bottom of the block
  • Centered horizontally and vertically: The content will display in the center of the block
  • Centered horizontally and bottom aligned vertically: The content will be centered at the bottom of the block

Height: Select how tall the banner will display on a page.

Gradient: Select a dark or light theme for the banner gradient.

Headline options: Select a font style for the banner block title.

Block Restrictions

The Banner Block is available in the following section layouts:

  • One column
  • Two column
  • Three column
  • Four column
  • Page w/ left sidebar

Related topics

Banner ready: How to tell Iowa’s story without overloading your users

Tuesday, March 4, 2025
Megan Yoder
OSC Web Team
The banner is a fantastic tool—when used correctly, it can amplify the Iowa story like nothing else. With the right combination of visuals, concise messaging, and clear calls to action, the banner becomes a dynamic way to grab attention and engage users. Let’s dive into how you can harness the full power of this component while keeping it visually appealing and effective.