# Comparison Cards

> Render compact positioning cards without a table.

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

`comparison_cards` compares options, audiences, or approaches using equal cards and point lists.

## When to Use

Use it when a full matrix is too heavy but visitors still need clear decision framing.

## Usage

```markdown
{{/* comparison_cards(title="Choose your path", card_1_title="Manual", card_2_title="Composable") */}}
```

## Live Example

{{ comparison_cards(
container="md",
title="Choose the right section style",
description="Use cards when each option needs narrative context.",
card_1_label="Manual",
card_1_title="Start from scratch",
card_1_desc="Maximum control, but every spacing and state decision is repeated.",
card_1_point_1="Useful for one-off experiments",
card_2_label="Composable",
card_2_title="Use shortcodes",
card_2_desc="Production-ready sections keep pages aligned by default.",
card_2_point_1="Consistent spacing",
card_2_point_2="Shared tokens",
card_3_label="Hybrid",
card_3_title="Extend carefully",
card_3_desc="Use classes only when a specific page needs extra tuning.",
card_3_point_1="Preserves the system"
) }}

## Parameters

| Parameter        | Description                                  |
| ---------------- | -------------------------------------------- |
| `container`      | Inner content width.                         |
| `eyebrow`        | Small uppercase label above the heading.     |
| `title`          | Section heading.                             |
| `description`    | Supporting copy.                             |
| `card_N_label`   | Card eyebrow label, up to 3 cards.           |
| `card_N_title`   | Card title.                                  |
| `card_N_desc`    | Card description.                            |
| `card_N_point_N` | Supporting points, up to 4 per card.         |
| `card_N_icon`    | Optional icon name.                          |
| `bg`             | Full-width section background token.         |
| `class`          | Additional CSS classes on the outer section. |