Skip to main content
The Timeline block renders a sequence of dated entries. It supports vertical, split (alternating left-right), and horizontal scroll layouts.

​
Props

​
heading
string
Section heading rendered as <h2>.
​
description
string
Supporting text below the heading.
​
items
TimelineEntry[]
Array of timeline entry objects. Each has:
  • date (string) — date or period label displayed as a small caps caption
  • title (string) — entry heading
  • description (string) — supporting text
  • image (SanityImageObject) — optional image with LQIP support
​
links
Button[]
Optional CTA buttons rendered below the timeline.
​
variant
'vertical' | 'split' | 'horizontal'
Layout variant. Defaults to vertical.
ValueDescription
verticalSingle-column list with a left-aligned date in a fixed 60px column and a vertical line
splitAlternating left-right entries on either side of a centered vertical line
horizontalHorizontally scrollable entries above a single horizontal line

​
Usage in Sanity Studio

  1. Add a Timeline block to a page.
  2. Set a Heading and optional Description.
  3. Add entries to the Items array — each needs a date label and title.
  4. Choose a Variant in Layout Options.

​
Example

{
  _type: 'timeline',
  heading: 'Program Milestones',
  variant: 'vertical',
  items: [
    { date: 'Sep 2024', title: 'Kickoff', description: 'Teams formed and sponsors assigned.' },
    { date: 'Dec 2024', title: 'Midpoint Review', description: 'Progress presentations to sponsors.' },
    { date: 'May 2025', title: 'Showcase', description: 'Final demo day open to the public.' }
  ]
}

Build docs developers (and LLMs) love

Get started for freeTalk to us