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#
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>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>
<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#
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