Timeline

A vertical (or alternating) spine of dated entries. Markers, icons, and entry cards are independently styleable. Add .vd-timeline-animated for staggered scroll-reveal, or .vd-timeline-playback to drive reveals from buttons.

Basic Timeline
March 2026

Project Launched

Initial release with core components, grid system, and theme engine.

February 2026

Beta Testing

Community feedback collected, accessibility audit completed, benchmarks run.

January 2026

Design Phase

Design tokens defined, Figma components created, docs site scaffolded.

December 2025

Concept & Planning

Requirements gathered, architecture decided, technology stack finalized.

<div class="vd-timeline vd-timeline-animated">
  <!-- Color goes on the item: vd-timeline-success / -warning / -danger -->
  <div class="vd-timeline-item vd-timeline-success">
    <div class="vd-timeline-marker"></div>
    <div class="vd-timeline-content">
      <span class="vd-timeline-date">March 2026</span>
      <h4 class="vd-timeline-title">Project Launched</h4>
      <p class="vd-timeline-text">Initial release of the framework.</p>
    </div>
  </div>
  <!-- …more .vd-timeline-item children… -->
</div>
Color Variants

Build Passed

All 142 tests passed. Bundle size within budget.

Deprecation Notice

The .vd-card-flat class will be removed in v3.0. Migrate to .vd-card-outlined.

Deploy Failed

CDN purge timed out. Rollback initiated automatically.

Alternating Timeline
09:00

Morning Standup

Team synced on sprint goals and blockers for the day.

11:30

Code Review

Reviewed pull requests for the new grid system and utilities.

14:00

Design Sync

Discussed token naming conventions and dark-mode adjustments.

16:30

Ship It

Merged, tagged, and deployed the release to production.

Playback Timeline

Step through reveals with the controls — no scrolling required.

Step 1

Clone & install

Pull the repo and install dependencies with pnpm.

Step 2

Run the dev server

Start Vite and open the docs locally.

Step 3

Make a change

Edit a component and watch HMR update instantly.

Step 4

Run the gates

Typecheck, lint, unit, and e2e all green.

Step 5

Open a PR

Push the branch and let the review bot do its pass.

<!-- Toolbar + list share the same direct parent -->
<div class="vd-btn-group" role="toolbar" aria-label="Timeline playback">
  <button class="vd-btn vd-btn-outline-secondary vd-btn-sm" data-vd-timeline-prev>Back</button>
  <button class="vd-btn vd-btn-outline-secondary vd-btn-sm" data-vd-timeline-next>Next</button>
  <button class="vd-btn vd-btn-outline-secondary vd-btn-sm" data-vd-timeline-play>Play</button>
  <button class="vd-btn vd-btn-outline-secondary vd-btn-sm" data-vd-timeline-pause disabled>Pause</button>
</div>
<div class="vd-timeline vd-timeline-animated vd-timeline-playback">
  …items…
</div>
Engine wiring
import { ref } from 'vue';
import { useTimeline } from "@vanduo-oss/vd3";

const root = ref<HTMLElement | null>(null);
useTimeline(root);   // wires every .vd-timeline-animated inside root
API Reference
Class / AttributeDescription
.vd-timelineContainer. Vertical spine of dated entries.
.vd-timeline-animatedOpt into staggered scroll-reveal (auto-init).
.vd-timeline-alternatingItems alternate left/right on desktop.
.vd-timeline-playbackStep reveals from buttons instead of scroll.
.vd-timeline-itemA single entry (marker + content).
.vd-timeline-markerThe dot on the spine. +-lg, +-success/-warning/-danger.
.vd-timeline-contentCard body: date + title + text.
data-vd-timeline-prev / -next / -play / -pausePlayback controls (in the timeline's direct parent).
Accessibility
  • Static timelines need no JS; animation is purely additive and respects prefers-reduced-motion.
  • Playback controls are real <button> elements with aria-labels and a role="toolbar" wrapper.
  • Markers are decorative; the date/title/text carry the meaning.