Timelines

Timelines are good to illustrate a connected set of events that have happened or are planned to happen.

Nothing

Big bang

Widely considered to be how the universe began

Galaxies go everywhere

Solar systems form

Earth appears

Human infestation occurs!

All this has happened before and will happen again

Evolution

<blaze-timeline loading>
  <blaze-timeline-item left>Nothing</blaze-timeline-item>
  <blaze-timeline-item type="brand">
    Big bang
    <p class="c-paragraph">
      Widely considered to be how the universe began
    </p>
  </blaze-timeline-item>
  <blaze-timeline-item type="info">Galaxies go everywhere</blaze-timeline-item>
  <blaze-timeline-item type="warning">Solar systems form</blaze-timeline-item>
  <blaze-timeline-item type="success">Earth appears</blaze-timeline-item>
  <blaze-timeline-item type="error">Human infestation occurs!</blaze-timeline-item>
  <blaze-timeline-item last>All this has happened before and will happen again</blaze-timeline-item>
  <blaze-timeline-item loading>Evolution</blaze-timeline-item>
</blaze-timeline>

Attributes

Timeline

Name	Description
alternate: boolean	Styles the line of time centrally
loading: boolean	Enables the loading item to occupy the last spot in the list

Timeline item

Name	Description
last: boolean	Removes the line of time for this item
loading: boolean	Styles the item differently to indicate the content is not ready

CSS

Standard

Nothing
Big bang
Widely considered to be how the universe began
Galaxies go everywhere
Solar systems form
Earth appears
Human infestation occurs!
All this has happened before, and will happen again

<ul class="o-timeline">
  <li class="c-timeline-item">
    <div class="c-timeline-item__body">
      Nothing
    </div>
  </li>
  <li class="c-timeline-item">
    <div class="c-timeline-item__body">
      Big bang

      <p class="c-paragraph u-text--quiet u-small">
        Widely considered to be how the universe began
      </p>
    </div>
  </li>
  <li class="c-timeline-item">
    <div class="c-timeline-item__body">Galaxies go everywhere</div>
  </li>
  <li class="c-timeline-item">
    <div class="c-timeline-item__body">Solar systems form</div>
  </li>
  <li class="c-timeline-item">
    <div class="c-timeline-item__body">Earth appears</div>
  </li>
  <li class="c-timeline-item">
    <div class="c-timeline-item__body">Human infestation occurs!</div>
  </li>
  <li class="c-timeline-item c-timeline-item--last">
    <div class="c-timeline-item__body">
      All this has happened before, and will happen again
    </div>
  </li>
</ul>

Colours

Nothing
Big bang
Widely considered to be how the universe began
Galaxies go everywhere
Solar systems form
Earth appears
Human infestation occurs!
All this has happened before, and will happen again

<ul class="o-timeline">
  <li class="c-timeline-item">
    <div class="c-timeline-item__body">
      Nothing
    </div>
  </li>
  <li class="c-timeline-item c-timeline-item--brand">
    <div class="c-timeline-item__body">
      Big bang

      <p class="c-paragraph u-text--quiet u-small">
        Widely considered to be how the universe began
      </p>
    </div>
  </li>
  <li class="c-timeline-item c-timeline-item--info">
    <div class="c-timeline-item__body">Galaxies go everywhere</div>
  </li>
  <li class="c-timeline-item c-timeline-item--warning">
    <div class="c-timeline-item__body">Solar systems form</div>
  </li>
  <li class="c-timeline-item c-timeline-item--success">
    <div class="c-timeline-item__body">Earth appears</div>
  </li>
  <li class="c-timeline-item c-timeline-item--error">
    <div class="c-timeline-item__body">Human infestation occurs!</div>
  </li>
  <li class="c-timeline-item c-timeline-item--last">
    <div class="c-timeline-item__body">
      All this has happened before, and will happen again
    </div>
  </li>
</ul>

Loading last item

Nothing
Big bang
Widely considered to be how the universe began
Galaxies go everywhere
Solar systems form
Earth appears
Human infestation occurs!
All this has happened before, and will happen again
...Evolution

<ul class="o-timeline o-timeline--loading">
  <li class="c-timeline-item">
    <div class="c-timeline-item__body">
      Nothing
    </div>
  </li>
  <li class="c-timeline-item">
    <div class="c-timeline-item__body">
      Big bang

      <p class="c-paragraph u-text--quiet u-small">
        Widely considered to be how the universe began
      </p>
    </div>
  </li>
  <li class="c-timeline-item">
    <div class="c-timeline-item__body">Galaxies go everywhere</div>
  </li>
  <li class="c-timeline-item">
    <div class="c-timeline-item__body">Solar systems form</div>
  </li>
  <li class="c-timeline-item">
    <div class="c-timeline-item__body">Earth appears</div>
  </li>
  <li class="c-timeline-item">
    <div class="c-timeline-item__body">Human infestation occurs!</div>
  </li>
  <li class="c-timeline-item c-timeline-item--last">
    <div class="c-timeline-item__body">
      All this has happened before, and will happen again
    </div>
  </li>
  <li class="c-timeline-item c-timeline-item--loading">
    <div class="c-timeline-item__body">
      ...Evolution
    </div>
  </li>
</ul>

Alternating items

Nothing
Big bang
Widely considered to be how the universe began
Galaxies go everywhere
Solar systems form
Earth appears
Human infestation occurs!
All this has happened before, and will happen again
...Evolution

<ul class="o-timeline o-timeline--alternate o-timeline--loading">
  <li class="c-timeline-item c-timeline-item--left">
    <div class="c-timeline-item__body">
      Nothing
    </div>
  </li>
  <li class="c-timeline-item c-timeline-item--brand">
    <div class="c-timeline-item__body">
      Big bang

      <p class="c-paragraph u-text--quiet u-small">
        Widely considered to be how the universe began
      </p>
    </div>
  </li>
  <li class="c-timeline-item c-timeline-item--info c-timeline-item--left">
    <div class="c-timeline-item__body">Galaxies go everywhere</div>
  </li>
  <li class="c-timeline-item c-timeline-item--warning">
    <div class="c-timeline-item__body">Solar systems form</div>
  </li>
  <li class="c-timeline-item c-timeline-item--success c-timeline-item--left">
    <div class="c-timeline-item__body">Earth appears</div>
  </li>
  <li class="c-timeline-item c-timeline-item--error">
    <div class="c-timeline-item__body">Human infestation occurs!</div>
  </li>
  <li class="c-timeline-item c-timeline-item--left c-timeline-item--last">
    <div class="c-timeline-item__body">
      All this has happened before, and will happen again
    </div>
  </li>
  <li class="c-timeline-item c-timeline-item--loading">
    <div class="c-timeline-item__body">
      ...Evolution
    </div>
  </li>
</ul>