Timeline
Component status:Beta
Displays chronologically ordered information.
#
Timeline Variants#
DefaultSample 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>
<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 AlignedSample 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 AlignedSample 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#
When to use- Choose this when you have content that you want to communicate activities that happen in a specific order over time.
#
When to use something else- If you are displaying a series of content that does not have dates associated with it then choose Cards, or Tiles or Panels to display that information.