Content Components

Hero - Feature

Highlight key destinations with a large banner and quick links

Content Strategy

Photography best practices

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

A visually rich hero component that displays a large banner image with optional call-to-action links and a quick links list.

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, up to two call to action links are displayed.	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? If checked, a banner image and optional quick links are displayed.	No	No
Banner Group containing fields for the banner and optional quick links.	Yes	No
Image (larger screens) Banner image for larger screens (for example, desktops and laptops). 1260×630.	Yes	No
Image (smaller screens) Banner image for smaller screens (for example, mobile devices). 740×370.	Yes	No
Image alt text Alternative text for the banner image.	Yes	No
Caption Optional. Caption displayed beneath the banner image. Limit to a short sentence.	No	No
Show quick links? If checked, a list of links is displayed next to the banner image. See list hub.	No	No

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.

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”)

Use long or complex copy—this is a visual lead-in, not a full content block
Put text in the hero image itself—this text cannot be read by assistive technology