Skip to main content
Site Builder
Indiana University
Content Components

Callout

Draw attention to a specific message or action in a bold content block

Included on:

Overview

The Callout component creates a bold, attention-grabbing block on your page. It’s best for highlighting a single, high-priority message or action you don’t want users to miss.

Common uses

  • Display announcements or alerts
  • Highlight key services, updates, or deadlines
  • Draw attention to an important resource or tool
  • Encourage a specific user action, such as Apply, Register, or Explore

Component example

  View in new window

Component fields

Element name Required Multiple
Heading level HTML heading level (H2, H3, etc.). Does not affect the visual style.
Yes No
Sticker ID Rivet sticker ID. See the Rivet website for a list of stickers.
Yes No
Eyebrow Optional. Small text above the title, often used for a category or topic (1–2 words).
No No
Title Title text (maximum 40 characters).
Yes No
Teaser Short supporting text beneath the title. Limit to a few short sentences. Bold and italic formatting only.
Yes No
Show calls to action? If checked, up to two call to action links are displayed.
No No
Call to action Group containing 1–2 call to action links.
No Yes
Call to action text Link text (a few words, using verb–noun phrasing such as "Apply now").
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 (for example, #section or ?utm=123).
No No

Accessibility

  • Use clear and concise headings
    Screen readers rely on them to navigate content.
  • Choose correct heading levels
    Match the callout’s heading level with the surrounding page structure (usually H2).
  • Write clear link text
    Buttons should describe the action or destination. Avoid vague text like Click here or Read more.

Do

  • Use to draw attention to one specific message or action
  • Limit callouts to one per page for maximum impact
  • Write short, action-oriented titles and button text
  • Keep teaser text brief and focused on a single idea
  • Choose a sticker that reinforces the message

Don't

  • Include long paragraphs in the teaser—keep it scannable
  • Use vague or generic button text like Click here
  • Use multiple callouts on a page—this reduces their impact
  • Stack multiple callouts in a row—use billboards or a card grid instead

Related content

  • Learn to Use Site Builder

  • Rivet Sticker Library