webdevpuneet.com

Related Snippets

144 in Dashboards category
1–6 of 60

Metric KPI Card Grid

Interact.js Draggable and Resizable Dashboard Panels with Snapping

Dragula Copy vs Move Lists with Spill Control

SortableJS Shared Groups: Clone from a Palette into a Page Builder

SortableJS Drag Handle with Pinned and Locked Rows

SortableJS Nested Sortable Tree with Keyboard Controls

Trip Itinerary Day Timeline — Free Vertical Timeline Snippet

Trip Itinerary Day Timeline · Dashboards · Plain HTML, CSS & JS · Live preview

CategoryDashboards
TagsCSS AnimationDashboard UI

Copy & paste

Source Code

<div class="idt-wrap">
  <div class="idt-header">
    <h2>Day 3</h2>
    <span class="idt-date">Saturday, Sep 12</span>
  </div>
  <ol class="idt-timeline" id="idtTimeline">
    <li class="idt-item" data-type="flight">
      <span class="idt-icon" aria-hidden="true">✈️</span>
      <div class="idt-content">
        <span class="idt-time">7:20 AM</span>
        <h3 class="idt-title">Flight to Lisbon</h3>
        <p class="idt-location">Charles de Gaulle · Terminal 2E</p>
      </div>
    </li>
    <li class="idt-item" data-type="hotel">
      <span class="idt-icon" aria-hidden="true">🏨</span>
      <div class="idt-content">
        <span class="idt-time">11:45 AM</span>
        <h3 class="idt-title">Check in — Hotel Alma</h3>
        <p class="idt-location">Praça Dom Luís I, Lisbon</p>
      </div>
    </li>
    <li class="idt-item" data-type="activity">
      <span class="idt-icon" aria-hidden="true">🏛️</span>
      <div class="idt-content">
        <span class="idt-time">1:30 PM</span>
        <h3 class="idt-title">Belém Tower walking tour</h3>
        <p class="idt-location">Av. Brasília, Belém</p>
      </div>
    </li>
    <li class="idt-item" data-type="restaurant">
      <span class="idt-icon" aria-hidden="true">🍽️</span>
      <div class="idt-content">
        <span class="idt-time">4:00 PM</span>
        <h3 class="idt-title">Coffee &amp; pastéis de nata</h3>
        <p class="idt-location">Pastéis de Belém</p>
      </div>
    </li>
    <li class="idt-item" data-type="restaurant">
      <span class="idt-icon" aria-hidden="true">🍽️</span>
      <div class="idt-content">
        <span class="idt-time">8:00 PM</span>
        <h3 class="idt-title">Dinner — Time Out Market</h3>
        <p class="idt-location">Av. 24 de Julho 49</p>
      </div>
    </li>
  </ol>
  <button type="button" class="idt-add" id="idtAdd">+ Add stop</button>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Pseudo-element line
One ::before threads every stop, no JS.
Type-coded icons
data-type colors flight, hotel, activity, meal.
Staggered entrance
nth-child delays sequence the reveal.
Card-per-stop layout
Time, title, location in a bordered card.
Dynamic append
Add stop button demonstrates hydrating from data.
Semantic ordered list
Built on ol/li for accessibility and order.
Zero dependencies
Plain HTML, CSS, and JS, no CDN.
Compact, mobile-first width
Max-width column reads well on phones.

About this UI Snippet

Trip Itinerary Day Timeline — One Day of a Trip, Stop by Stop

Screenshot of the Trip Itinerary Day Timeline snippet rendered live

The itinerary day timeline is the vertical list travel apps use to lay out a single day of a trip — a flight, a hotel check-in, a walking tour, a couple of meals — each stop time-stamped, iconed, and connected by a line running down the left edge. This snippet builds it in plain HTML, CSS, and JS.

A connecting line with no JavaScript

The vertical line down the timeline's spine is a single ::before pseudo-element on the <ol>, positioned absolutely and stretched with top/bottom offsets. It sits behind the icon circles (via z-index), so stops read as beads threaded on a thread rather than separate boxes.

Type-coded icons

Each <li> carries a data-type attribute — flight, hotel, activity, or restaurant — and the icon circle's border color is keyed off that attribute in CSS. A flight stop gets a blue ring, a hotel a purple one, and so on, so scanning down the line tells you the shape of the day before you read a single word.

Staggered entrance

Each list item fades and slides in on load with a short animation-delay incrementing per child, using nth-child rather than JavaScript to sequence the reveal — a cheap way to make a static itinerary feel alive without a scroll library.

Cards, not just text

Each stop's content — time, title, location — sits in its own bordered card offset from the icon by a small left margin, so the timeline reads clearly even when titles wrap to two lines or locations run long.

Extendable via one function

The "Add stop" button appends a new <li> from a small queue of extra stops, showing how you'd hydrate the timeline from a real itinerary API — build the markup string once, insert it, and disable the control once the day is fully populated.

Customizing it

Add a "current stop" highlight for today's active item, collapse past stops, or group the list by multiple days with a header per day. Pair it with a boarding pass, property listing card, or an order tracking timeline for a different kind of sequence.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA day header and connected timeline of stops render.
  2. 2
    Watch the staggered revealEach stop fades and slides in on load.
  3. 3
    Note the icon colorsdata-type on each item colors its icon ring.
  4. 4
    Click "Add stop"New items append with the same connecting line.
  5. 5
    Swap in real dataBuild the same markup from your itinerary API.
  6. 6
    Restyle per typeAdjust the data-type selectors for your own palette.

Real-world uses

Common Use Cases

Trip planners
Lay out a day beside a property listing card, with time-stamped stops connected by a single pseudo-element line and no JavaScript.
Travel app itineraries
Follow a flight status tracker stop with the rest of the day, with data-type colouring flights, hotels, activities and meals.
Booking confirmations
Summarise a traveller's day right after checkout, with a staggered entrance animation that reveals each stop in sequence as the page loads.
Event and conference agendas
Reuse the pattern for a conference day schedule, where each card shows the time, title and location.
Tour operators and step-by-step docs
Show each stop of a guided tour, or any time-stamped sequence such as an onboarding document, in the same card-per-stop layout.
Related: Keyboard Focus Order Debugger — Numbered Tab-Order Overlay
See the Keyboard Focus Order Debugger — Numbered Tab-Order Overlay for a related dashboards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The vertical line is a single ::before pseudo-element on the ol, absolutely positioned with top and bottom offsets so it spans the list, and given a lower z-index than the icon circles so stops appear threaded on it rather than overlapping it.

Each li carries a data-type attribute (flight, hotel, activity, restaurant), and the icon circle's border-color is set with a [data-type="..."] CSS selector. Changing the attribute is enough to recolor a stop — no per-item inline styles or extra classes needed.

Each .idt-item animates from a slightly offset, transparent state to its resting state using a CSS keyframe, with animation-delay incrementing per child via nth-child selectors. It's a pure-CSS stagger — no scroll or animation library involved — that plays once on page load.

Build the same li markup — icon, data-type, time, title, location — for each stop from your itinerary API response and either render it server-side or append it client-side the way the "Add stop" button's handler does, which builds an HTML string and calls appendChild.

Yes — repeat the .idt-header plus .idt-timeline block once per day, each with its own ol so the connecting line and stagger delays reset per day. You could also wrap each day in a collapsible section for a multi-day trip view.