Timeline

Component status:Ready

A Timeline displays a series of milestones with descriptions in chronological order.

Use a Timeline for time-based milestones that happen in a specific order.

Examples

Default

Sample Item

Spring 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nulla ante. Suspendisse potenti. Donec efficitur, sem vitae dignissim viverra, nunc purus tempus nisi, feugiat ullamcorper tellus urna ut dui. Suspendisse potenti.

Sample Item 2

Summer 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nulla ante. Suspendisse potenti. Donec efficitur, sem vitae dignissim viverra, nunc purus tempus nisi, feugiat ullamcorper tellus urna ut dui. Suspendisse potenti.

Sample Item 3

Autumn 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nulla ante. Suspendisse potenti. Donec efficitur, sem vitae dignissim viverra, nunc purus tempus nisi, feugiat ullamcorper tellus urna ut dui. Suspendisse potenti.

<div class="bux-timeline">
  <div class="bux-timeline__item">
    <div class="bux-timeline__marker" aria-hidden="true"></div>
    <div class="bux-timeline__content">
      <h3 class="bux-timeline__heading">Sample Item</h3>
      <div class="bux-timeline__date">Spring 2022</div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in
        nulla ante. Suspendisse potenti. Donec efficitur, sem vitae dignissim
        viverra, nunc purus tempus nisi, feugiat ullamcorper tellus urna ut dui.
        Suspendisse potenti.
      </p>
    </div>
  </div>
  <div class="bux-timeline__item">
    <div class="bux-timeline__marker" aria-hidden="true"></div>
    <div class="bux-timeline__content">
      <h3 class="bux-timeline__heading">Sample Item 2</h3>
      <div class="bux-timeline__date">Summer 2022</div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in
        nulla ante. Suspendisse potenti. Donec efficitur, sem vitae dignissim
        viverra, nunc purus tempus nisi, feugiat ullamcorper tellus urna ut dui.
        Suspendisse potenti.
      </p>
    </div>
  </div>
  <div class="bux-timeline__item">
    <div class="bux-timeline__marker" aria-hidden="true"></div>
    <div class="bux-timeline__content">
      <h3 class="bux-timeline__heading">Sample Item 3</h3>
      <div class="bux-timeline__date">Autumn 2022</div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in
        nulla ante. Suspendisse potenti. Donec efficitur, sem vitae dignissim
        viverra, nunc purus tempus nisi, feugiat ullamcorper tellus urna ut dui.
        Suspendisse potenti.
      </p>
    </div>
  </div>
</div>

{#
Buckeye UX - version 1.0.15
Copyright (C) 2024 The Ohio State University
#}

{# 

Timeline

Available variables:

- modifier:                 Sets the alignment of the timeline. Either 'null', 
                            'right' or 'center'.
- timeline_heading_level:   Integer. Sets the heading level for the timeline 
                            titles.
- items:                    Array containing the timeline list items.
- item.timeline_heading:    String. Heading of the timeline item.
- item.timeline_date:       String. Date for the timeline item.
- item.timeline_content:    String. Content for the timeline item.

#}

<div class="bux-timeline {% if modifier %}bux-timeline--{{ modifier }}{% endif %}">
	{% if modifier == 'center' %}
		{% for item in items %}
		<div class="bux-timeline__row">
			<div class="bux-timeline__item{% if loop.index is even %} bux-timeline__item--even{% endif %}">
				<div class="bux-timeline__marker" aria-hidden="true"></div>
				<div class="bux-timeline__content">
					<h{{ timeline_heading_level|default(3) }} class="bux-timeline__heading">{{ item.timeline_heading }}</h{{ timeline_heading_level|default(3) }}>
					<div class="bux-timeline__date">{{ item.timeline_date }}</div>
					{{ item.timeline_content }}
				</div>
			</div>
		</div>
		{% endfor %}
	{% else %}
		{% for item in items %}
		<div class="bux-timeline__item">
			<div class="bux-timeline__marker" aria-hidden="true"></div>
			<div class="bux-timeline__content">
				<h{{ timeline_heading_level|default(3) }} class="bux-timeline__heading">{{ item.timeline_heading }}</h{{ timeline_heading_level|default(3) }}>
				<div class="bux-timeline__date">{{ item.timeline_date }}</div>
				{{ item.timeline_content }}
			</div>
		</div>
		{% endfor %}
	{% endif %}
</div>

Right Aligned

Sample Item

Spring 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nulla ante. Suspendisse potenti. Donec efficitur, sem vitae dignissim viverra, nunc purus tempus nisi, feugiat ullamcorper tellus urna ut dui. Suspendisse potenti.

Sample Item 2

Summer 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nulla ante. Suspendisse potenti. Donec efficitur, sem vitae dignissim viverra, nunc purus tempus nisi, feugiat ullamcorper tellus urna ut dui. Suspendisse potenti.

Sample Item 3

Autumn 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nulla ante. Suspendisse potenti. Donec efficitur, sem vitae dignissim viverra, nunc purus tempus nisi, feugiat ullamcorper tellus urna ut dui. Suspendisse potenti.

<div class="bux-timeline bux-timeline--right"></div>

Center Aligned

Sample Item

Spring 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nulla ante. Suspendisse potenti. Donec efficitur, sem vitae dignissim viverra, nunc purus tempus nisi, feugiat ullamcorper tellus urna ut dui. Suspendisse potenti.

Sample Item 2

Summer 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nulla ante. Suspendisse potenti. Donec efficitur, sem vitae dignissim viverra, nunc purus tempus nisi, feugiat ullamcorper tellus urna ut dui. Suspendisse potenti.

Sample Item 3

Autumn 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nulla ante. Suspendisse potenti. Donec efficitur, sem vitae dignissim viverra, nunc purus tempus nisi, feugiat ullamcorper tellus urna ut dui. Suspendisse potenti.

<div class="bux-timeline bux-timeline--right"></div>

# When using the center align variant, every other `bux-timeline__item` should have an `even`
modifier class.
<div class="bux-timeline__item bux-timeline__item--even"></div>

# If using the twig code example below, the `even` classes will be applied programmatically.

Usage

Dos

• Use for time-based events (dates, seasons, etc.), like history of an event
• Keep copy concise, providing a brief overview within each milestone

Don’ts

• Don’t use a Timeline for lists without an associated time or season
• Don't use for a simple list; consider using a List instead
• Don't use for an advanced list; consider using a Listicle instead
• Don't use for a list of future steps; consider using a Listicle (ordered variant) instead