Timeline

Timelines provide visual timelines for conveying chronoligical information, such as historical events, storytelling, and process overviews.

This component has a UO Edit Suite template for easy use on Drupal Sites: How to use this template

Examples and Code

Select exampleDefault

Open Full Example

<ul class="timeline">
  <li class="timeline__list-item">
    <div class="timeline__indicator"><span class="timeline__icon"></span></div>
    <div class="timeline__card palette-bg-light-blue"><small class="timeline__subhead">Aug 1, 2017</small>
      <h3 class="timeline__title">Card Title</h3>
      <div class="timeline__body">
        <p>This is an example of a white timeline card. It features a date, title, and teaser text.</p>
      </div>
    </div>
  </li>
</ul>

Guidance

When to Use Timelines

• For storytelling detailing historical events
• For outlining steps in a process or workflow

Usage Guidance

• Don’t use for non chronological designs: If the design is not conveying a chronological set of steps or events, a timeline should not be used.

Elements

Element	Description	Usage	Required	Multiple
List Item	An event in the timeline		Yes	Yes
Title	The event title	The title of the event	No	No
Body	The event body	The core body content of the event	Yes	No