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 options to change the appearance of the banner block.

Container:

  • Narrow: The width of the banner content will decrease, resulting in shorter line lengths for improved readability.

Horizontal alignment
Select the horizontal position where the banner will be aligned:

  • Left: The content will be aligned to the left horizontally.
  • Center: The content will be horizontally centered.

Vertical alignment
Select the vertical position where the banner will be aligned:

  • Top: The content will be aligned to the top vertically.
  • Center: The content will be vertically centered.
  • Bottom: The content will be aligned to the bottom vertically.

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

Media overlay: 

  • No Gradient: A solid color with transparency will overlay the image.

  • Top to Bottom: The gradient will start from the top and transition to transparency towards the bottom.

  • Left to Right: The gradient will start from the left and transition to transparency towards the right.

  • Bottom to Top: The gradient will start from the bottom and transition to transparency towards the top.

Overlay: The default overlay color is black and checking this box will change it to white.

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.