Skip to main content

Timeline

Component status:Beta
Displays chronologically ordered information.

Timeline Variants#

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

Code Examples#