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>

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

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

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.