Skip to main content

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.

Sample Item 2

Summer 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sample Item 3

Autumn 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<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.</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.</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.</p>
</div>
</div>
</div>

Right Aligned#

Sample Item

Spring 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sample Item 2

Summer 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sample Item 3

Autumn 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

Center Aligned#

Sample Item

Spring 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sample Item 2

Summer 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sample Item 3

Autumn 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<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