The OdinAdmin template has just been developed — explore the new dashboard, modules and settings. See Details

Timelines

One list, several layouts: basic, icons, cards, dated, compact, alternating, horizontal and progress steps. Pure CSS — no script needed.

Basic.timeline
  1. Page published

    About Us is live in EN, KY and RU.

  2. Review requested

    Julia asked Thomas to review the new pricing table.

  3. Translation missing

    The Russian version of Careers is 2 paragraphs behind.

  4. Backup failed

    Storage was full. The next run succeeded.

  5. Site created
With icons.timeline.tl-icons
  1. Version 2.4 deployed

    New booking calendar and faster image loading.

  2. 2 users invited
    HWAT
    Author · Translator
  3. 12 images uploaded

    Media › Tours › Autumn 2026

  4. 5 failed sign-ins

    admin@odincms.io from 185.220.101.4 — blocked for 1 hour.

Compact.timeline.tl-compact

  1. Liam published Careers

  2. Julia updated Our Team

  3. Pieter signed in

  4. Nurdin changed SEO settings

  5. Camille uploaded 3 files

  6. Aigerim deleted a draft post

  7. System created the daily backup

Full activity log
Cards with avatars.tl-icons.tl-cards
  1. JF
    Julia Fischer commented on Pricing

    Can we show the yearly price first? Most clients pay yearly.

  2. Thomas Müller changed 2 fields
    TitleMeta description
  3. PJ
    Pieter Janssen attached a file
    price-list-2027.pdf · 214 KB
  4. Page approved by Nurdin Mukhambet
    Ready to publish
Date column.timeline.tl-dated
  1. 23 Oct2026
    v1.4 — Gantt, invoices, activity logLatest

    Three new apps, collapsible sidebar, roles and permissions.

  2. 20 Oct2026
    v1.3 — Support tickets

    Help-desk queue with SLA timers and a ticket panel.

  3. 16 Oct2026
    v1.2 — Pages & users

    Sortable page tree, page form and the users table.

  4. 09 Oct2026
    v1.0 — First release

    Dashboard, components and the authentication pages.

Alternating.timeline-center
2026
  1. Project kickoff

    Goals, budget and the launch date agreed with Carter Sports.

  2. Design approved

    Homepage, product pages and checkout signed off after two rounds.

  3. Content in three languages

    English, Kyrgyz and Russian copy for 32 pages.

  4. Go live

    DNS switched at 09:00; old URLs redirect to the new pages.

Horizontal.timeline-h
  1. Kickoff

    Scope and budget

  2. Sitemap

    32 pages, 3 languages

  3. Design

    In progress · 35%

  4. Build

    Theme and shop

  5. Launch

    Go live

Horizontal steps.tl-steps.tl-steps-h
  1. Draft
  2. Review
  3. Translate
  4. Publish
Tracking steps.tl-steps
  1. Order placed

    #ORD-10482 · 3 items · $248.00

  2. Payment confirmed
  3. Shipped

    DHL Express · tracking JD0146 0001 2345

  4. Out for delivery
  5. Delivered
Usagecss/components/timeline.css

Every layout uses the same item. Add a layout class to the list and a colour class to the marker (success, danger, warning, info, violet, muted, dark).

<ol class="timeline">           <!-- + tl-icons | tl-cards | tl-dated | tl-compact -->
  <li class="tl-item">
    <span class="tl-marker success"></span>   <!-- tl-icons: put an <i> or .av-sm inside -->
    <div class="tl-content">
      <div class="tl-head">
        <strong class="tl-title">Page published</strong>
        <time class="tl-time">09:12</time>
      </div>
      <p class="tl-text">About Us is live.</p>
    </div>
  </li>
</ol>
<!-- Steps: number, ✓ when done, ✕ when failed -->
<ol class="tl-steps">              <!-- + tl-steps-h for a row -->
  <li class="tl-item is-done"><span class="tl-step"></span><div class="tl-content">…</div></li>
  <li class="tl-item is-current"><span class="tl-step"></span>…</li>
  <li class="tl-item"><span class="tl-step"></span>…</li>
</ol>