Skip to main content
Site Builder
Indiana University
Content Components

Hero - Default

Introduce page content with a prominent banner

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 prominent, page-level banner typically used at the top of a page to introduce content with a large title, optional eyebrow and teaser, and up to two calls to action. Optionally includes a callout card for emphasizing a secondary message or link.

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 1–2 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 are displayed below the 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 callout card? If checked, a callout card is displayed to the right of the hero content.
No No
Callout card Group containing fields for the callout card.
No No
Callout card eyebrow Optional. Small text above the callout card title. Limit to a few words.
No No
Callout card title Callout card title. Used as link text if a link is provided.
Yes No
Callout card teaser Optional. Short supporting text for the callout. Bold and italic formatting only.
No No
Callout card link Optional. Destination Page or External Link.
No No
Callout card 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 duplicating main hero content in the callout card
    Doing so might confuse or disorient users of assistive technology.

Do

  • Use to introduce a page's content and direct people to your most important calls to action
  • 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 or complex copy—this is a visual lead-in, not a full content block
  • Duplicate the main hero content in the callout card

Related content

  • Choosing Components

  • Learn to Use Site Builder