# HowItWorksCardsGrid

**Kind:** Component

**Source:** [`atloria-monorepo/templates/site-bootstrap/src/sections/how-it-works/how-it-works-cards-grid.tsx`](https://github.com/sherkety/atloria/blob/main/atloria-monorepo/templates/site-bootstrap/src/sections/how-it-works/how-it-works-cards-grid.tsx#L20)

## Props

| Name | Type | Required | Default |
|---|---|---|---|
| `labelKey` | `string` | - | - |
| `headlineKey` | `string` | ✓ | - |
| `descriptionKey` | `string` | - | - |
| `steps` | `unknown[]` | ✓ | - |

## Diagram

```mermaid
graph TD
    component_HowItWorksCardsGrid_1987d9c3["HowItWorksCardsGrid"]
    class component_HowItWorksCardsGrid_1987d9c3 rootComponent
```

## Relationships

- RENDERS → `motion-div`
- RENDERS → `motion-span`
- RENDERS → `motion-h2`
- RENDERS → `motion-p`
- RENDERS → `StepIndicator`
- USES_HOOK → `useTranslation`