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 two-column hero component that pairs an image (left or right) with call-to-action buttons. Ideal for landing pages or section intros where visual storytelling supports immediate action.
Component example
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
|
|
Image (larger screens)
Hero image for larger screens (for example, desktops and laptops). 600×748.
|
Yes
|
No
|
|
Image (smaller screens)
Optional. Hero image for smaller screens (for example, mobile devices). 600×600.
|
Yes
|
No
|
|
Image alt text
Alternative text for the hero image.
|
Yes
|
No
|
|
Caption
Optional. Caption displayed beneath the hero image.
|
No
|
No
|
|
Show call to action links?
If checked, call to action links are displayed alongside the hero content.
|
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
|
Accessibility
-
Use a clear title and teaserPeople 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 textEnsure 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 imageText 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
- 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
- Put text in the hero image itself—this text cannot be read by assistive technology