Composites & Sections · 14 Props

Process

Multi-step process visualization with numbered cards, icons, and descriptions. Use for onboarding flows or how-it-works sections.

Composites & Sections 14 Props

src/components/blocks/Process.astro

← Alle Components

Props

Prop	Type	Default	Beschreibung
title *	string	—
aside	object	—
aside.badges	any[]	—
aside.class	string	—
aside.ctas	any[]	—
aside.items	string[]	—
aside.title	string	—
cardClass	string	—
class	string	—
eyebrow	string	—
gridClass	string	—
headingProps	any	{}	Extra props merged onto the internal Heading (size, maxW, …)
id	string	—
layout	string	split	"split" \| "grid" \| "stack" \| "timeline"
numberClass	string	—	Extra classes for the step-number disc — see ProcessStepCard.numberClass.
steps	object[]	[]
steps[].badges	any[]	—
steps[].bullets	string[]	—
steps[].description	string	—
steps[].icon	string	—
steps[].meta	string	—
steps[].title *	string	—
stepStyle	string	card	Step rendering: "card" (default) or "plain" (big tinted number circle, no card) "card" \| "plain"
subtitle	string	—
variant	string	numbered	"numbered" \| "icon"

Beispiele

Default

Four-step workflow with icons and descriptions.

Discovery
We analyze your needs and define project scope.
Design
We create wireframes and visual designs.
Development
We build your site with modern technologies.
Launch
We deploy, test, and go live.

{
  "type": "process",
  "props": {
    "steps": [
      {
        "title": "Discovery",
        "description": "We analyze your needs and define project scope.",
        "icon": "solar:magnifer-line-duotone"
      },
      {
        "title": "Design",
        "description": "We create wireframes and visual designs.",
        "icon": "solar:palette-line-duotone"
      },
      {
        "title": "Development",
        "description": "We build your site with modern technologies.",
        "icon": "solar:code-line-duotone"
      },
      {
        "title": "Launch",
        "description": "We deploy, test, and go live.",
        "icon": "solar:rocket-line-duotone"
      }
    ]
  }
}

<Process steps={[{"title":"Discovery","description":"We analyze your needs and define project scope.","icon":"solar:magnifer-line-duotone"},{"title":"Design","description":"We create wireframes and visual designs.","icon":"solar:palette-line-duotone"},{"title":"Development","description":"We build your site with modern technologies.","icon":"solar:code-line-duotone"},{"title":"Launch","description":"We deploy, test, and go live.","icon":"solar:rocket-line-duotone"}]} />