Timeline

Usage

Timeline displays a vertical sequence of entries along a central bar — useful for company history, project milestones, product releases, or any content with a clear order. Each entry has a Key label on the timeline axis (often a date, but freeform), a Title, and a Body with optional image and link.

The block inserts with three sample Timeline Card entries. Add more with Add Timeline Entry when the parent block is selected, or use the block inserter — only Timeline Cards are allowed, so the inserter adds a new entry directly.

Entries are not sorted automatically. Drag cards in list view to reorder; the display order is whatever you set in the editor.

The vertical timeline bar uses your site's primary color from the Customizer.

Parent and child blocks

The Timeline parent (ds/timeline) holds one or more Timeline Card children (ds/timeline-card).

Select Timeline for layout style. Select an individual Timeline Card to edit that entry's key, title, body, image, or link.

Layout (parent)

Sidebar control under Settings:

• Layout — Alternating (default) or Uniform
  • Alternating — on desktop (600px and up), even entries appear on one side of the bar and odd entries on the other, creating a classic zigzag timeline
  • Uniform — all entries align on the same side of the bar with a wider content area and larger circular images

On mobile, entries stack vertically with the key label rotated along the bar. Even rows get a subtle background band in alternating layout.

Entry fields (child)

Each Timeline Card includes:

• Key — freeform label on the timeline axis, edited inline (default placeholder suggests a date like "May 1999"). Rendered as h4. Use dates, years, step numbers, or any short label — nothing enforces chronological sorting
• Title — entry headline, edited inline or in the Title sidebar field. Rendered as h3
• Body — paragraph and list inner blocks below the title (default template includes one paragraph)

All three fields can be edited inline by clicking into them. The key sits on the opposite side of the bar from the body in alternating layout.

Image (child)

Optional circular photo beside the entry content. Choose Choose Image in the sidebar when no image is set.

Images display as circles — pick photos that read well at small sizes (about 100px in alternating layout, larger in uniform). Use Image Focal Point after selecting an image to keep the important area centered in the crop.

Link (child)

Optional Link URL in the sidebar. When a URL is set, link text appears below the body (default Learn More). Click the link text in the editor to change it.

With a link set, Style appears:

• Understated (default) — text link styling
• Button — button-style link

Clear the URL to remove the link entirely.

Block width

Timeline supports Wide and Full alignment from the block toolbar and defaults to Wide width.

Tips

• Set Layout on the parent first, then add entries — uniform layout gives more room for images and longer copy.
• Keep Key labels short so they fit cleanly beside the timeline bar on mobile.
• Reorder entries manually to match chronological or narrative order; the block does not sort by date.
• For numbered process steps with connector lines rather than dated milestones, use Step by Step instead.
• The key field is freeform — use it for version numbers, quarters, or labels other than dates when that fits your content better.