Comparison Cards

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.

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

Use cards when each option needs narrative context.

Manual

Maximum control, but every spacing and state decision is repeated.

Useful for one-off experiments

Composable

Production-ready sections keep pages aligned by default.

Consistent spacing

Shared tokens

Hybrid

Use classes only when a specific page needs extra tuning.

Preserves the system

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.