No. 21 of 106

Timeline Horizontal

A horizontal, swipeable timeline.

    On this page
  1. What's shipping, quarter by quarter
  2. Key moments, in one glance
  3. Every release, side by side
  4. The lineup, hour by hour
  5. Problem to result, in four steps
USE CASE · QUARTERLY ROADMAP ON A PRODUCT PAGE

A horizontal strip reads left-to-right like a real roadmap — alternating above/below keeps every card readable.

Q1

Dark Mode

System-wide dark mode, ready to ship.

Q2 Shipped

Team Workspaces

Shared spaces with role-based permissions.

Q3

Public API

A documented REST API with a free tier.

Q4 Beta

Mobile Apps

Native iOS and Android apps in beta.

USE CASE · MILESTONES STRIP ON AN ABOUT PAGE

All-above layout reads like a clean banner — a quiet, tinted strip of the company's biggest moments.

2018 Start

Founded

Two people, one idea, a co-working desk.

2019

First Product

Shipped to our first 500 users.

2021 Funding

Series A

Raised $4.2M to grow the team.

2024 Latest

100K Users

Crossed our biggest milestone yet.

USE CASE · RELEASE HISTORY STRIP IN A DARK-MODE CHANGELOG

A dark horizontal strip that matches a dark-mode docs or changelog page.

v3.0 Major

New Editor

A rebuilt block editor with live collaboration.

v3.1

Webhook Retries

Failed webhooks now retry with backoff.

v3.2

Faster Search

Queries now return in under 80ms.

USE CASE · FESTIVAL DAY SCHEDULE ON AN EVENT PAGE

Glass cards below the axis keep the photo visible above — a natural fit for a horizontal festival or conference schedule.

12:00

Gates Open

Early entry, food trucks and merch stalls open.

3:00 Live

Main Stage

The first headline set of the day.

7:00

Sunset Set

The golden-hour slot everyone waits for.

10:00

Closing Set

The night ends with the festival's biggest act.

USE CASE · PROCESS STEPS ON A CASE STUDY PAGE

A gradient header band gives each step card a bit of energy without turning the page into a rainbow.

01

Audit

Found 4 major drop-off points in checkout.

02

Redesign

Rebuilt around a single-page checkout.

03

Test

A/B tested against the original for 3 weeks.

04 +27%

Results

Completion rose 27% within a month.

USE CASE · SETUP STEPS ON AN ONBOARDING PAGE

A soft neumorphic strip feels calm and guided — a good match for a horizontal setup checklist.

1

Create Account

Sign up with your work email.

2

Connect Data

Link your existing tools.

3

Invite Team

Add teammates and assign roles.

4 Done

Go Live

Publish your first workspace.

USE CASE · A BRAND HISTORY STRIP ON AN EDITORIAL PAGE

A quiet outlined style keeps the focus on the words — right at home in a long-form editorial layout.

2015

The Idea

A late-night conversation about a problem worth solving.

2017

The Launch

Three years of building, then one very quiet launch day.

2023

The Milestone

A decade of small decisions adding up to something real.