Skip to content

Timeline

Vertical timeline with semantic color dots. Use .fap-timeline on an ordered list.

Vertical timeline

  1. v0.3.0 released

    Gallery, lightbox, timeline, media placeholders, and 30 CSS icons.

  2. HTML5 deep dive

    Added styles for every semantic HTML5 element.

  3. 10 new features

    Skeleton loading, toast, breadcrumb, tabs, badge, tooltip.

  4. Initial release

    Core framework: reset, typography, layout, components.

<ol class="fap-timeline">
  <li data-success>
    <time datetime="2026-04-16">April 16, 2026</time>
    <strong>v0.3.0 released</strong>
    <p>Description text.</p>
  </li>
  <li>
    <time>April 10, 2026</time>
    <strong>Event title</strong>
    <p>Description text.</p>
  </li>
  <li data-warning>…</li>
  <li data-danger>…</li>
</ol>

Alternate (zigzag) variant

  1. Present day

    Items alternate left and right on wider screens.

  2. Planning phase

    Research, prototyping, and design decisions.

  3. Concept

    The idea for a classless-first framework takes shape.

<ol class="fap-timeline" data-alternate>
  <li data-success>
    <time>2026</time>
    <strong>Present day</strong>
    <p>Alternates left and right.</p>
  </li>
  <li>…</li>
</ol>