CardRow
StableResults side by side: a grid on wide screens, a swipe row on a phone.
Also known as carousel, card grid, card list, horizontal scroll
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
A row of results
- Free cancellation
Hôtel des Arts
Montmartre, Paris
- Rating
- 4.6 of 5
- Check-in
- From 3pm
- Walk to metro
- 4 min
€182a night
Le Petit Marais
Le Marais, Paris
- Rating
- 4.4 of 5
- Check-in
- From 2pm
- Walk to metro
- 2 min
€214a night
- Best match
Rive Gauche Studio
Saint-Germain, Paris
- Rating
- 4.8 of 5
- Check-in
- From 4pm
- Walk to metro
- 6 min
€249a night
<CardRow label="Hotels in Paris">
<ResultCard ... />
<ResultCard ... />
<ResultCard ... />
</CardRow>Wraps on wide screens, swipes on a phone.
When to use it
Lets people compare a handful of results at a glance, on any screen.
Made of: Row · Card
Use it for
- Two to eight results of the same kind.
- Results in a chat answer that must fit a phone.
Not for
- Many results people filter and sort: use DataTable.
- Pictures the AI made, to pick from: use VariantGrid.
Do and avoid
Do
- Use it for results of the same kind.
- Keep to a handful; link to a full list for more.
Avoid
- Do not mix kinds of results in one row.
- Do not hide the scroll on a phone; the peeking card shows there is more.
On a phone
- Cards swipe sideways and snap into place, each at most 85% of the width.
- The row can be scrolled with the keyboard once it has focus.
Seen in products
- OpenUI lays out repeated card blocks with a Carousel, and every item in the block has the same structure.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | none | Names the group for screen readers. |
| childrenrequired | ReactNode | none | Two or more ResultCards with the same fields. |
| minCardWidth | 52 | 60 | 72 | 60 | Narrowest a card may get on wide screens, in the spacing scale (60 is 240px). |
| className | string | none | Extra classes on the list. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- wide
- A grid that wraps; cards in a row share one height.
- phone
- A row that swipes sideways and snaps, with the next card peeking in.
- focus
- The row shows a focus ring and scrolls with the arrow keys on a phone.
Tokens
Change one of these and every part that uses it follows.
--spacing--focus-ring
Built in
- A list with a label, so its length and name are announced.
- On a phone the row takes keyboard focus and scrolls with the arrow keys.
What you need to do
- Give the row a label that says what is in it, such as Hotels in Paris.
- Keep the cards in the order the answer ranks them.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide