EXTENDED UI · TIMELINE

Timeline Basic

Compact timelines that live inside cards — activity, progress, tracking.
THEME
01

Playground

Marker, colour, line, density and time
Spring 27 · history4 of 6 done
  1. ✎
    Brief approvedLena · Calm, honest, lots of daylight.DONE
  2. ✍
    Contract signedLena · Licence: 2 years, EU + online.DONE
  3. €
    Deposit paid · €11,580Nordic Thread · AV-2026-031 settled by transfer.DONE
  4. ◉
    Shoot · MývatnJonas · 3 days, 2 locations, 1,240 frames.DONE
  5. ✦
    Retouch in progressAna · 13 of 40 heroes — on track.IN PROGRESS
  6. ⇪
    DeliveryYou · Finals, BTS film and licence PDF.UPCOMING
<Timeline marker="icon" tone="status" line="solid" dashUpcoming density="full" time="relative"> <TimelineItem status="done" date="2026-09-01" title="Brief approved" /> <TimelineItem status="current" date="2026-10-17" title="Retouch in progress" /> <TimelineItem status="upcoming" date="2026-10-27" title="Delivery" /> </Timeline>
Settings
MARKER
COLOUR
LINE · UPCOMING
DENSITY
TIME
02

Variants

Six card timelines used across Avava
Activityteam · today
  1. ⇪Ana uploaded 12 selects to Finals
  2. “Lena commented on Hero 04
  3. €Nordic Thread paid AV-2026-042 · €11,580
  4. ✓Jonas moved Post-production to In progress
Project progressdone · now · next
  1. ✓
    BriefDONEApproved Sep 1
  2. ✓
    ShootDONEMývatn · Oct 10–12
  3. 3
    RetouchNOW13 / 40 heroes
  4. 4
    DeliveryPending
62 % · due Oct 27
Album prints · 2 × A3DHL · JD014600 3341IN TRANSIT
  1. ✓
    Order placedDONEOct 14 · 10:02
  2. ✓
    PrintedDONEOct 15 · Berlin lab
  3. 3
    ShippedNOWOct 16 · DHL
  4. 4
    Out for deliveryPending
  5. 5
    DeliveredPending
With attachmentsfiles · chips
  1. Ana uploaded 12 selects to Finals
    H04H07H12+9
  2. Lena signed the licencePDFSpring27-licence-signed.pdf248 KB
  3. Jonas tagged Hero 04
    HeroApprovedPrint
Commentsavatars as markers
  1. LenaHero 04 is the one. Can we push the blue?
  2. AnaYes — v3 by lunch.
  3. JonasI’ll check it on the big screen.
  4. LenaPerfect, thanks!
Changelogversions · lists
  1. ★v1.2LATEST
    • NEWClient portal for every project
    • FIXInvoice totals with discounts
    • CHANGEFaster gallery upload
  2. •v1.1LATEST
    • NEWStar ratings on selects
    • FIXTimezone in call sheets
  3. •v1.0LATEST
    • NEWFirst public release
03

Behaviour

Show more, new events, loading and empty
Show moreolder events on demand
  1. ⇪Ana uploaded 12 selects
  2. “Lena commented on Hero 04
  3. €Nordic Thread paid €11,580
New event on toparia-live="polite"
    Statesloading · empty · data
    1. ⇪Ana uploaded 12 selects
    2. “Lena commented on Hero 04
    3. €Nordic Thread paid €11,580
    04

    Rules & a11y

    Checklist and Do / Don’t
    Checklist
    ✓<ol> + <li>order is meaning; “item 3 of 6”
    ✓<time datetime>relative time with the exact date on hover
    ✓Status in words, not just colourDone / Now / Upcoming
    ✓aria-current="step"on the current step
    ✓aria-live="polite" for new eventsannounce, never steal focus
    ✓Max ~6 items in a cardthen “Show more” or a full page
    DO✓Show who did it and when✓Dash the future, solid for the past✓Keep one line per event in cards✓Link “View all” to the full timeline
    DON’T✕Use colour as the only status cue✕Mix newest-first and oldest-first✕Put long text inside a card timeline✕Animate every item on load