# Steps Cards

> Render numbered process steps in cards.

Canonical HTML: https://press.varavel.com/docs/shortcodes/steps-cards/
Markdown: https://press.varavel.com/docs/shortcodes/steps-cards/index.md

`steps_cards` renders a sequence of numbered cards with optional icons and links.

## When to Use

Use it for onboarding, implementation flows, launch checklists, or any process where order matters.

## Usage

```markdown
{{/* steps_cards(
item_1_title="Install",
item_1_desc="Add the theme to your Zola project."
) */}}
```

## Live Example

{{ steps_cards(
container="md",
title="From install to launch",
item_1_icon="download",
item_1_title="Install",
item_1_desc="Add the theme to your Zola project.",
item_2_icon="settings",
item_2_title="Configure",
item_2_desc="Set metadata, theme options, and page structure.",
item_3_icon="rocket",
item_3_title="Launch",
item_3_desc="Build with Zola and deploy static output."
) }}

## Parameters

| Parameter      | Description                                                         |
| -------------- | ------------------------------------------------------------------- |
| `container`    | Inner content width for the steps section.                          |
| `eyebrow`      | Small uppercase label above the heading.                            |
| `title`        | Section heading.                                                    |
| `description`  | Supporting copy below the heading.                                  |
| `columns`      | Desktop column count. Use `2`, `3`, or `4`.                         |
| `item_N_step`  | Optional step number for item `N`. Defaults to automatic numbering. |
| `item_N_title` | Step title for item `N`.                                            |
| `item_N_desc`  | Step description for item `N`.                                      |
| `item_N_icon`  | Optional icon for item `N`.                                         |
| `item_N_href`  | Optional link URL for item `N`.                                     |
| `item_N_link`  | Optional link label for item `N`.                                   |
| `bg`           | Full-width section background token.                                |
| `class`        | Additional CSS classes on the outer section.                        |