Timeline

Show a chronological series of events and highlight milestones

Overview #

Use the timeline component to show a chronological series of events and highlight milestones.

Examples #

Choose an example

<div class="rvt-timeline">
  <div class="rvt-timeline__item">
    <div class="rvt-timeline__marker" aria-hidden="true">
    </div>
    <div class="rvt-timeline__content">
      <h2 class="rvt-timeline__heading">Organize your info</h2>
      <span class="rvt-timeline__date">Spring 2022</span>
      <p>Before you start, you may want to make a list of all your senior year classes and high school extracurricular activities, so you’re ready to enter those in your application. Also consider whether you want to include your SAT and/or ACT test scores in your application.</p>
    </div>
  </div>
  <div class="rvt-timeline__item">
    <div class="rvt-timeline__marker" aria-hidden="true">
    </div>
    <div class="rvt-timeline__content">
      <h2 class="rvt-timeline__heading">Pick your campus</h2>
      <span class="rvt-timeline__date">Summer 2022</span>
      <p>You can apply to any IU campus using the Apply IU app, which will ask you to select which IU campus(es) you want to send your application to. You can choose as many as you like, and you’ll only pay one application fee based on where you apply.</p>
    </div>
  </div>
</div>

Open in new window Copy link to example

<div class="rvt-timeline rvt-timeline--right">
  <div class="rvt-timeline__item">
    <div class="rvt-timeline__marker" aria-hidden="true">
    </div>
    <div class="rvt-timeline__content">
      <h2 class="rvt-timeline__heading">Organize your info</h2>
      <span class="rvt-timeline__date">Spring 2022</span>
      <p>Before you start, you may want to make a list of all your senior year classes and high school extracurricular activities, so you’re ready to enter those in your application. Also consider whether you want to include your SAT and/or ACT test scores in your application.</p>
    </div>
  </div>
  <div class="rvt-timeline__item">
    <div class="rvt-timeline__marker" aria-hidden="true">
    </div>
    <div class="rvt-timeline__content">
      <h2 class="rvt-timeline__heading">Pick your campus</h2>
      <span class="rvt-timeline__date">Summer 2022</span>
      <p>You can apply to any IU campus using the Apply IU app, which will ask you to select which IU campus(es) you want to send your application to. You can choose as many as you like, and you’ll only pay one application fee based on where you apply.</p>
    </div>
  </div>
</div>

Open in new window Copy link to example

<div class="rvt-timeline rvt-timeline--center">
  <div class="rvt-timeline__row">
    <div class="rvt-timeline__item">
      <div class="rvt-timeline__marker" aria-hidden="true">
      </div>
      <div class="rvt-timeline__content">
        <h2 class="rvt-timeline__heading">Organize your info</h2>
        <span class="rvt-timeline__date">Spring 2022</span>
        <p>Before you start, you may want to make a list of all your senior year classes and high school extracurricular activities, so you’re ready to enter those in your application. Also consider whether you want to include your SAT and/or ACT test scores in your application.</p>
      </div>
    </div>
  </div>
  <div class="rvt-timeline__row">
    <div class="rvt-timeline__item rvt-timeline__item--right">
      <div class="rvt-timeline__marker" aria-hidden="true">
      </div>
      <div class="rvt-timeline__content">
        <h2 class="rvt-timeline__heading">Pick your campus</h2>
        <span class="rvt-timeline__date">Summer 2022</span>
        <p>You can apply to any IU campus using the Apply IU app, which will ask you to select which IU campus(es) you want to send your application to. You can choose as many as you like, and you’ll only pay one application fee based on where you apply.</p>
      </div>
    </div>
  </div>
</div>

Open in new window Copy link to example

<div class="rvt-timeline">
  <div class="rvt-timeline__item">
    <div class="rvt-timeline__marker" aria-hidden="true">
    </div>
    <div class="rvt-timeline__content">
      <h2 class="rvt-timeline__heading">Organize your info</h2>
      <span class="rvt-timeline__date rvt-timeline__date--label">Spring 2019</span>
      <p>Before you start, you may want to make a list of all your senior year classes and high school extracurricular activities, so you’re ready to enter those in your application. Also consider whether you want to include your SAT and/or ACT test scores in your application.</p>
    </div>
  </div>
  <div class="rvt-timeline__item">
    <div class="rvt-timeline__marker" aria-hidden="true">
    </div>
    <div class="rvt-timeline__content">
      <h2 class="rvt-timeline__heading">Pick your campus</h2>
      <span class="rvt-timeline__date rvt-timeline__date--label">Summer 2022</span>
      <p>You can apply to any IU campus using the Apply IU app, which will ask you to select which IU campus(es) you want to send your application to. You can choose as many as you like, and you’ll only pay one application fee based on where you apply.</p>
    </div>
  </div>
</div>

Elements #

Element	Description	Usage	Required	Multiple
Timeline item	Item that appears along the timeline	Arrange items on the timeline in chronological order	Timeline item is required	Component may contain multiple Timeline item
Heading	Title that appears at the top of the timeline item	Limit to a short phrase	Heading is required	Component may contain only one Heading
Date	Date that appears under the timeline item title	Limit to temporal information like dates, seasons, or semesters	Date is required	Component may contain only one Date
Content	Text that appears under the timeline item title and date	Limit to a few short sentences. Avoid lists, images, or complex content.	Content is optional	Component may contain only one Content

Usage #

Use the width utilities to adjust external labels. The external labels are set to a width of 10rem in order to create a uniform appearance. To adjust this, use the width utility classes on the span element with the .rvt-timeline__date--label class.

Do

Use to show events or milestones in chronological order

Don't

Use to show the user's position in a multi-step process—use a step indicator instead
Use for normal lists—use the list component instead