CardGroup
A responsive grid wrapper for laying out several Cards side by side.
Usage
Design
Building a scalable design token system
A look at how semantic tokens keep a component library themeable.
Engineering
CSS-only animation, end to end
Why every transition in this library skips JavaScript entirely.
vue-html
<SCardGroup>
<SCard>...</SCard>
<SCard>...</SCard>
</SCardGroup>
Single column below the sm breakpoint, cols columns at sm and up -
2 by default, matching the most common use (Card's
own comparison/before-after cases). SCardGroup has no opinion on what's
inside it - any children work, not just Card.
Custom :ui
Global and scoped recipe overrides use ui.cardGroup.
To see exactly what you'd be overriding - the current default classes for
every slot - here's CardGroup's own theme file:
Theme source "card-group" not found
Props
| Prop | Type | Default |
|---|---|---|
cols | 2 | 3 | 4 | 2 |
ui | Partial<Record<CardGroupSlot, string | object>> | - |