Section reference › Content

Timeline `"type": "timeline"`

A vertical timeline of milestones, each with a year, title and short text. Use it for your company history, a career path or a project roadmap.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "timeline",
  "tone": "alt",
  "eyebrow": "Our story",
  "title": "Fifteen years in the making",
  "items": [
    {
      "year": "2011",
      "title": "Two founders, one kitchen table",
      "text": "Sarah and David start the studio with a single client and a borrowed laptop."
    },
    {
      "year": "2015",
      "title": "Our first office",
      "text": "The team grows to twelve and moves into a converted warehouse by the river."
    },
    {
      "year": "2020",
      "title": "Going fully remote",
      "text": "We rebuild the way we work and hire the best people wherever they live."
    },
    {
      "year": "Today",
      "title": "40 people, 3 continents",
      "text": "Still independent, still obsessed with doing great work for good clients."
    }
  ]
}

Options#

Option	Type	Default	Description
`eyebrow`	string	—	Small label shown above the title.
`title`	string (HTML allowed)	—	Section heading. You can use <em> or <br> inside it.
`text`	string	—	Short intro paragraph under the title.
`headAlign`	string	`center`	Alignment of the eyebrow/title/text block. "start" puts it on the left. Values: `center \| start`
`items`	array	—	The milestones, in order. See the "items" fields.

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Fields of each entry in `items`#

Option	Type	Default	Description
`year`	string \| number	—	Big label, usually a year ("2019") but any short text works ("Phase 1", "Today").
`title`	string	—	Milestone title.
`text`	string	—	One or two sentences.

Tips#

Keep the "year" short (up to about 8 characters) so it fits the label.
4 to 6 milestones read best.

Editing it in the HTML files#

The timeline is ol.timeline; each milestone is an li.timeline-item with the year in .timeline-year and the title and text in .timeline-card.

Where it's used#

Open these pages in template/ to see it working:

Creative Agency: template/creative-agency/about.html (source src/demos/creative-agency/pages/about.json)
Real Estate: template/real-estate/about.html (source src/demos/real-estate/pages/about.json)
Corporate: template/corporate/about.html (source src/demos/corporate/pages/about.json)
Finance: template/finance/about.html (source src/demos/finance/pages/about.json)
Law Firm: template/law-firm/about.html (source src/demos/law-firm/pages/about.json)
SaaS Product: template/saas/about.html (source src/demos/saas/pages/about.json)
Mobile App: template/mobile-app/about.html (source src/demos/mobile-app/pages/about.json)
Tech Conference: template/conference/gallery.html (source src/demos/conference/pages/gallery.json)
Online Academy: template/education/about.html (source src/demos/education/pages/about.json)
Restaurant: template/restaurant/about.html (source src/demos/restaurant/pages/about.json)
Coffee Shop: template/cafe/about.html (source src/demos/cafe/pages/about.json)
Hotel & Resort: template/hotel/about.html (source src/demos/hotel/pages/about.json)
Wedding: template/wedding/home-2.html (source src/demos/wedding/pages/home-2.json)
Gym & Fitness: template/gym/about.html (source src/demos/gym/pages/about.json)
Yoga Studio: template/yoga/about.html (source src/demos/yoga/pages/about.json)
Day Spa & Salon: template/spa/home-2.html (source src/demos/spa/pages/home-2.json)
Medical Clinic: template/medical/about.html (source src/demos/medical/pages/about.json)
Dental Clinic: template/dental/about.html (source src/demos/dental/pages/about.json)
Pet Care: template/pet-care/about.html (source src/demos/pet-care/pages/about.json)
Construction: template/construction/about.html (source src/demos/construction/pages/about.json)
Car Dealer: template/car-dealer/about.html (source src/demos/car-dealer/pages/about.json)
Travel Agency: template/travel/about.html (source src/demos/travel/pages/about.json)
Photographer: template/photography/about.html (source src/demos/photography/pages/about.json)
Architecture Studio: template/architecture/home-2.html (source src/demos/architecture/pages/home-2.json)
Interior Design: template/interior-design/about.html (source src/demos/interior-design/pages/about.json)
Portfolio: template/portfolio/index.html (source src/demos/portfolio/pages/index.json)
Music Festival: template/music-festival/about.html (source src/demos/music-festival/pages/about.json)
Fashion Store: template/fashion-store/about.html (source src/demos/fashion-store/pages/about.json)
Charity: template/charity/about.html (source src/demos/charity/pages/about.json)
Logistics: template/logistics/about.html (source src/demos/logistics/pages/about.json)

Timeline "type": "timeline"