# Styling (/docs/styling)



Every part renders a single element with a `data-slot` naming it, for example `[data-slot="card-front"]`. Its state is written as `data-*` attributes. Values that change continuously are CSS variables, which inherit, so any descendant can use them.

`className` and `style` accept functions of state, like in Base UI:

```tsx
<Card.Root className={(state) => (state.frozen ? "grayscale" : "")} />
```

`render` swaps the element for another tag or your own component:

```tsx
<Card.Root render={<section />} />
<Card.Body render={<motion.div animate={{ rotateY: flipped ? 180 : 0 }} />} />
```

## Reference [#reference]

| Part                               | Data attributes                                         | CSS variables                                                  |
| ---------------------------------- | ------------------------------------------------------- | -------------------------------------------------------------- |
| `Card.Root`                        | `data-flipped`, `data-frozen`, `data-revealed`          |                                                                |
| `Card.Tilt`                        | `data-hovering`, `data-disabled`                        | `--card-pointer-x/y`, `--card-tilt-x/y`                        |
| `Card.Body`                        | `data-flipped`                                          | `--card-flipped`                                               |
| `Card.Front`, `Card.Back`          | `data-side`, `data-visible`                             |                                                                |
| Triggers                           | `data-pressed`, `data-disabled`                         |                                                                |
| `Card.Number`, `Card.SecurityCode` | `data-revealed`, `data-animating`                       | `--char-count`                                                 |
| their cells                        | `data-char-state`                                       | `--char-index`, `--group-index`                                |
| `Card.Holder`, `Card.Expiry`       | `data-revealed`                                         |                                                                |
| `Card.FrozenOverlay`               | `data-open`, `data-starting-style`, `data-ending-style` |                                                                |
| `Card.Spending`                    | `data-over-limit`                                       | `--card-spending-ratio`                                        |
| `CardCarousel.Root`                | `data-dragging`                                         | `--carousel-position`                                          |
| `CardCarousel.Track`               | `data-dragging`                                         |                                                                |
| `CardCarousel.Slide`               | `data-active`                                           | `--slide-offset`, `--slide-offset-clamped`, `--slide-distance` |
| `CardCarousel.Indicator`           | `data-active`                                           |                                                                |