Skip to main content

Timelines

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

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>