Skip to main content
Site Builder
Indiana University
Content Components

Hero - Statement

Make a bold, focused statement with optional supporting visuals and calls to action

Included on:

Content Strategy

Photography best practices

Visit the IU Brand website for guidance on choosing effective images to pair with your page's text content.

Overview

A hero component that emphasizes a concise, impactful message with bold typography. Optional features include call-to-action links, banner images, and a callout for highlighting a secondary message.

Component example

  View in new window

Component fields

Element name Required Multiple
Title Optional. Hero title. If left blank, the page Display Name is used.
No No
Eyebrow Optional. Small text above the title. Typically used for a topic or category name. Limit to a few words.
No No
Teaser Optional. Short summary of the page content. Bold and italic formatting only.
No No
Show call to action links? If checked, call to action links will appear below the title and teaser.
No No
Call to action Group containing fields for a single call to action link. Maximum 2.
No Yes
Call to action text Link text (a few words, using active verb phrasing such as "Apply now" or "Schedule a visit").
Yes No
Call to action link Destination Page or External Link.
Yes No
Call to action link parameters Optional. Anchor or query string appended to the URL.
No No
Show banner images? If checked, banner images will appear in the hero.
No No
Banner image Group containing fields for a banner image. Maximum 3.
No Yes
Image (larger screens) Banner image. 1260×630.
Yes No
Image (smaller screens) Optional. Image for smaller screens. 740×370.
Yes No
Image alt text Alternative text for the image.
Yes No
Show banner callout? If checked, a banner callout will appear in the hero.
No No
Banner callout Group containing fields for a callout message.
No No
Callout sticker ID Rivet sticker ID. See the Rivet website for a list of stickers.
Yes No
Callout eyebrow Optional. Small text above the callout text (1–2 words).
No No
Callout text Short callout message (a few sentences).
Yes No
Callout link Destination Page or External Link.
Yes No
Callout link parameters Optional. Anchor or query string appended to the URL.
No No

Accessibility

  • Use a clear title and teaser
    People using assistive technology rely on the title and teaser to help them determine if they are on the right page.
  • Use clear call to action text
    Ensure call to action button text clearly describes the page its linking to. People using assistive technology might not see or hear the text around a link. Avoid "learn more," "click here," or similarly vague link text.
  • Avoid putting text in the hero image
    Text added to images generally can't be read by assistive technology. For sighted users, text over photos is often difficult to read.

Do

  • Use to introduce a page's content and direct people to your most important calls to action
  • Keep the statement short, clear, and audience-focused
  • Use eyebrow text to help categorize or signal context (e.g., “Admissions,” “Campus Life”)
  • Make calls to action meaningful and actionable (“Start application,” “Register now”)

Don't

  • Use long paragraphs—this component is meant to be brief and impactful
  • Combine banner images with conflicting styles, tones, or subjects—choose images that feel cohesive and support a unified message instead
  • Put text in the hero image itself—this text cannot be read by assistive technology

Related content

  • Choosing Components

  • Learn to Use Site Builder