Layout · 23 Props

Timeline

Vertical timeline with alternating or single-sided item placement. Supports icons, dates, connecting lines, and rich content per entry.

Layout 23 Props

src/components/blocks/Timeline.astro

← Alle Components

Props

Prop	Type	Default	Beschreibung
boxClass	string	""
boxVariant	string	—	"none" \| "border" \| "soft"
class	string	""
compactOnMobile	boolean	true
endClass	string	""
fallbackIcon	string	solar:map-arrow-right-line-duotone
iconTone	string	accent	"primary" \| "secondary" \| "accent" \| "neutral" \| "success" \| "info" \| "warning" \| "error"
iconVariant	string	bg	"plain" \| "bg" \| "border" \| "both"
itemGap	string	mb-10
itemIndent	number	6
items	object[]	[]
items[].class	string	—	extra class on the item wrapper
items[].cta	object	—	optional CTA inside the box
items[].icon	string	—
items[].iconTone	string	—	"primary" \| "secondary" \| "accent" \| "neutral" \| "success" \| "info" \| "warning" \| "error"
items[].lineClass	string	—
items[].meta	string	—
items[].number	string	—	optional override; otherwise auto i+1
items[].placement	string	—	"start" \| "end"
items[].text	string	—
items[].title *	string	—
lineClass	string	—
lineWidth	string	hair	"md" \| "hair" \| "thin"
marker	string	icon	NEW "number" \| "none" \| "icon"
middleClass	string	""
numberTone	string	accent	"primary" \| "secondary" \| "accent" \| "neutral" \| "success" \| "info" \| "warning" \| "error" \| "base"
numberVariant	string	solid	"outline" \| "ghost" \| "dash" \| "solid" \| "soft" \| "tinted"
orientation	string	auto	"auto" \| "horizontal" \| "vertical"
side	string	alternate	"left" \| "right" \| "alternate"
size	string	lg	Title / text sizing "sm" \| "md" \| "lg" \| "xs"
snapIcon	boolean	true
startClass	string	""
tone	string	accent	"primary" \| "secondary" \| "accent" \| "neutral" \| "success" \| "info" \| "warning" \| "error"

Beispiele

Default

Chronological sequence with dates and descriptions.

Project Kickoff
Design Phase
Development
Launch

{
  "type": "timeline",
  "props": {
    "items": [
      {
        "title": "Project Kickoff",
        "date": "Week 1",
        "description": "Requirements gathering and scope definition."
      },
      {
        "title": "Design Phase",
        "date": "Week 2–3",
        "description": "Wireframes, mockups, and design review."
      },
      {
        "title": "Development",
        "date": "Week 4–6",
        "description": "Frontend and backend implementation."
      },
      {
        "title": "Launch",
        "date": "Week 7",
        "description": "Testing, deployment, and go-live."
      }
    ]
  }
}

<Timeline items={[{"title":"Project Kickoff","date":"Week 1","description":"Requirements gathering and scope definition."},{"title":"Design Phase","date":"Week 2–3","description":"Wireframes, mockups, and design review."},{"title":"Development","date":"Week 4–6","description":"Frontend and backend implementation."},{"title":"Launch","date":"Week 7","description":"Testing, deployment, and go-live."}]} />