Skip to main content

Timelines

The timeline device can be used to convey passing of time, process etc.

A wrapper element with the .timeline class gives its children access to the .ti (timeline item) class.

A .ti element may have children of .ti-title and .ti-subtitle.

A .timeline element can have an orientation of .ttb or .rtl (defaults to top-to-bottom)

horizontal​

LAP 1
Principles of Programming
LAP 2
Data
LAP 3
Fancy Frontends
LAP 4
Same Concepts, New Tools
<div className="timeline ttb">
  <div className="ti">
    <div className="ti-title">LAP 1</div>
    <div className="ti-subtitle">Principles of Programming</div>
  </div>
  <div className="ti">
    <div className="ti-title">LAP 2</div>
    <div className="ti-subtitle">Data</div>
  </div>
  <div className="ti">
    <div className="ti-title">LAP 3</div>
    <div className="ti-subtitle">Fancy Frontends</div>
  </div>
  <div className="ti">
    <div className="ti-title">LAP 4</div>
    <div className="ti-subtitle">Same Concepts, New Tools</div>
  </div>
</div>

vertical​

LAP 1
Principles of Programming
LAP 2
Data
LAP 3
Fancy Frontends
LAP 4
Same Concepts, New Tools
<div className="timeline ltr">
  <!-- all other content and classes as above -->
</div>