---
title: "Card"
description: "Token-variant cards as a div or a whole-card link, with theme and card-width figures."
requested_language: fr
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/fr/components/card
version: unreleased (main)
docs_index: https://docs.systhema.app/fr/llms.txt
---
> This page isn't translated yet. Showing English.
A card is a padded, bordered box whose look comes from a card variant in your tokens. Use it for teasers, feature lists and pricing tiles, either as a plain container or as one large link.
```tsx preview title="Card"
import { Button, Card, Heading, Paragraph } from '@systhemaui/next'
export default function Demo() {
return (
Design tokens
Colors, spacing and type come from one Figma export, so every card on the site stays in sync
with the design.
Read more
)
}
```
## Import
```tsx
import { Card } from '@systhemaui/next'
```
In a React app without Next.js, import it from `@systhemaui/react`.
## Variants and tags
`variant` takes a card variant from your tokens: `default` and `highlighted` with the default tokens. Omit it to get the first variant. Each token variant becomes one class, `card-`, with its own padding, border, radius, shadow and colors.
```tsx preview title="Card variants"
import { Card, Column, Columns, Heading, Paragraph } from '@systhemaui/next'
export default function Demo() {
return (
DefaultThe everyday card for lists and teasers.HighlightedDraws the eye to one item in a group.
)
}
```
The tag variants pick the element:
| Tag variant | Renders |
| ----------- | --------------------------------------------------------------------- |
| `Card` | `
`, or the element you pass as `as` |
| `Card.div` | `
` |
| `Card.a` | a link (in `@systhemaui/next`, a `next/link`; see [Next.js](#nextjs)) |
| `Card.link` | `@systhemaui/next` only: the same `next/link` card as `Card.a` |
## Examples
### Theme
`theme` sets `data-theme` on the card, so it renders in another color-system mode than the page around it. With the default tokens the modes are `default` and `dark`. See [Themes and backgrounds](https://docs.systhema.app/fr/concepts/themes.md#the-theme-prop).
```tsx preview title="Dark card on a light page"
import { Card, Heading, Paragraph } from '@systhemaui/next'
export default function Demo() {
return (
Night shift
The card switches to the dark mode of the color system; its text and border tokens follow.
)
}
```
### Linked cards
Use `Card.a` (or `Card.link`) when the whole card is the link, instead of wrapping a card in a separate link. A linked card gets the variant's hover colors and your `transitionClasses`.
```tsx preview title="Whole-card links"
import { Card, Column, Columns, Heading, Paragraph } from '@systhemaui/next'
export default function Demo() {
return (
Getting startedInstall the packages and render your first page.ComponentsBrowse every component with live examples.
)
}
```
Keep the content of a linked card free of other links and buttons: interactive elements nested in a link are invalid HTML and confuse keyboard and screen-reader users.
### Card-width figures
A [`Figure`](https://docs.systhema.app/fr/components/figure.md#card-width) with `width="card"` breaks out of the card's horizontal padding to its edges. As the first or last child it also drops the card's top or bottom padding, so media sits flush against the rounded corners.
```tsx preview title="Figure flush to the card edges"
import { Card, Figure, Heading, Image, Paragraph } from '@systhemaui/next'
export default function Demo() {
return (
Edge to edgeThe figure ignores the card padding; the text keeps it.
)
}
```
### Rich text inside a card
A card carries the `richtext` class, so headings, paragraphs, lists and buttons inside it get the [rich-text rhythm](https://docs.systhema.app/fr/concepts/spacing-model.md) without extra margins. The card animates as one unit: animated elements inside it render in their end state without a reveal of their own. Pass `disableAnimation` to drop the card's own reveal as well.
## Props
`Card` and `Card.div` accept `as`, `variant`, `theme`, `disableAnimation` and every attribute of the rendered element.
| Prop | Type | Default | Description |
| --------------------------- | ---------------------------------------- | ------- | ----------- |
| `as` | `ElementType` | `'div'` | |
| `className` | `string` | - | |
| `variant` | `CardVariant` (`default`, `highlighted`) | - | |
| `theme` | `ColorSystem` (`dark`, `default`) | - | |
| `disableAnimation` | `boolean` | - | |
| …and all `
` attributes | | | |
## HTML and CSS
Write the variant class plus `richtext` on any element. The variant classes are generated per token variant (`card-default` and `card-highlighted` with the default tokens), and their values come from the `card` tokens in [spacing](https://docs.systhema.app/fr/reference/tokens/spacing.md#card) and [colors](https://docs.systhema.app/fr/reference/tokens/colors.md#card).
```html
Design tokens
Colors, spacing and type come from one Figma export.