Skip to main content
Site Builder
Indiana University
Content Components

Timeline

Display a sequence of steps, milestones, or events

Included on:

Overview

The Timeline component lets you present a sequence of steps or events in a structured, visually engaging format.

Each timeline item includes a label, title, short description, and optional calls to action. You can also highlight important dates for individual steps.

Common uses

  • Present step-by-step instructions (e.g., an application process)
  • Highlight project milestones or achievements
  • Provide a structured roadmap for an initiative or campaign
  • Showcase a chronology of events (e.g., program history)

Component example

  View in new window

Component fields

Element name Required Multiple
Item Group containing all fields for a single timeline step. Multiple items create the full timeline.
Yes Yes
Label Optional. Brief label displayed above the title (for example, "Step one").
No No
Title Optional. Short title for the step.
No No
Description Optional. Brief description of the step (1–3 sentences). Supports bold, italic, links, and bullet lists.
No No
Show important dates? If checked, important date fields are displayed for this step.
No No
Important date Group containing fields for one or more dates for this step.
No Yes
Show call to action links? If checked, up to two call to action links are displayed for this step.
No No
Call to action text Link text for the call to action. Keep it short and action-oriented.
No Yes
Call to action link Destination Page or External Link.
No Yes
Call to action link parameters Optional. Query string or anchor appended to the URL.
No Yes

Accessibility

  • Keep labels and titles concise
    Short, descriptive labels and titles help all users scan and understand the sequence.
  • Use clear date formats
    Dates should be written in full (e.g., January 10, 2026, Fall 2027) to avoid confusion for screen readers.
  • Ensure consistent structure

    Each step should follow the same pattern (label, title, description) to reduce cognitive load.

Do

  • Use to display steps, milestones, or events in sequence
  • Keep descriptions brief and scannable (1–3 sentences)
  • Include important dates when they add clarity or context
  • Write call to action text in action-oriented phrasing (e.g., Apply now, Register today)

Don't

  • Overload a single step with long paragraphs—keep content concise
  • Add inconsistent details (e.g., dates on some items but not others)
  • Use for lists of topics or resources—use a list hub or card grid instead

Related content

  • Choosing Components

  • Learn to Use Site Builder