Composites & Sections · 11 Props

Process

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

Composites & Sections 11 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	—
id	string	—
layout	string	split	"split" \| "stack"
steps	object[]	[]
steps[].badges	any[]	—
steps[].bullets	string[]	—
steps[].description	string	—
steps[].icon	string	—
steps[].meta	string	—
steps[].title *	string	—
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"}]} />