Navigation

Timeline

The .quanta-timeline component displays chronological events along a vertical line. Each .quanta-timeline-item marks a point on the timeline, with support for a special “beginning” marker, icons, and responsive alternation.

Markup

Basic structure:

<div class="quanta-timeline">
  <div class="quanta-timeline-item">
    <div class="quanta-time">08:00</div>
    <h4 class="quanta-title">Breakfast</h4>
    <p class="quanta-content">Enjoy your meal.</p>
  </div>
  <!-- More items... -->
</div>

07:00

Start

Timeline begins here.

08:00

Breakfast

Enjoy your meal.

09:00

Meeting

Project sync-up.

Beginning Marker

Add .quanta-beginning to an item to show a special hollow-start icon.

<div class="quanta-timeline-item quanta-beginning">…</div>

Start

Kickoff

Initialize project.

Alternate (2‑column)

On screens ≥768px, items sit in two columns automatically.

10:00

Workshop

Skill-building session.

12:00

Lunch

Break for food.

14:00

Review

Project retrospective.

Dark Mode

All colors adapt when data-theme="dark" is set on <html>.

Switch your preview into dark mode to see it live.