# Card

`Card` is the card when nothing is happening to it. It is the same face the reveal turns over, at any size, for a collection page, a shop shelf or a list of what was pulled. A legendary keeps its turning foil border and its shine, on CSS animations, so a wall of them costs no JavaScript.

> Live preview: see it play at https://bettertyped.github.io/react-cards-opening/docs/components/card/
>
> One of each tier. The button turns them over.

## Usage

```tsx
import { Card, themeOf } from "@react-cards-opening/ui";

<Card card={card} theme={themeOf("grape", "dark")} width={220} />

// Face down until it is opened.
<Card card={card} faceDown={!opened.includes(card.id)} width="100%" />
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `card?` | `GlyphCard` | A card for the ready-made face: `name`, `line`, `art`. |
| `rarity?` | `string` | The tier, when there is no `card` or to override its own. |
| `rarities?` | `readonly RarityTier[]` | Your tiers. |
| `theme?` | `CardTheme` | The colours. |
| `tone?` | `string` | The card's colour, instead of the tier's on the theme. |
| `note?` | `string` | A small last line on the ready-made face. |
| `faceDown?` | `boolean` | Show the back. Changing it turns the card over. |
| `width?` | `number \| string` | Any CSS width. 300 pixels by default. |
| `ratio?` | `number` | Height over width. 4 / 3 by default. |
| `back?` | `ReactNode` | The back, instead of the question glyph. |
| `className?` | `string` | Added to the card. |
| `classNames?` | `CardClassNames` | A class of your own for each part of the card. |
| `style?` | `CSSProperties` | Added to the card. |
| `children?` | `ReactNode \| ((info) => ReactNode)` | A face of your own. As a function it is given the tone and the tier. |

## It scales

A `Card` is designed at 300 pixels wide and everything on it scales with its width: type, padding, corners, the glyph. A card 150 pixels wide is the same card at half size, which is also why a revealed card can shrink into one without a jump.

## A face of your own

```tsx
<Card rarity="epic" theme={theme}>
  {({ tone, tier }) => (
    <>
      <img src={art} alt="" style={{ flex: 1, objectFit: "cover", borderRadius: 12 }} />
      <p style={{ color: tone }}>{tier.label}</p>
    </>
  )}
</Card>
```

The face is a flex column with the card's padding. [Custom card face](https://bettertyped.github.io/react-cards-opening/docs/guides/custom-card-face/) covers sizing it so it scales with the card.

## Turning it over

Changing `faceDown` flips the card in 0.6 seconds with a small overshoot. For the full reveal, with the flight and the tier's show, hand the card's element to [CardOpening](https://bettertyped.github.io/react-cards-opening/docs/components/card-opening/) as both `launch` and `landing`.

## Related

- [Custom card face](https://bettertyped.github.io/react-cards-opening/docs/guides/custom-card-face/)
- [CardOpening](https://bettertyped.github.io/react-cards-opening/docs/components/card-opening/)
- [Foil border](https://bettertyped.github.io/react-cards-opening/docs/effects/foil-border/)
- [PixelGlyph](https://bettertyped.github.io/react-cards-opening/docs/components/pixel-glyph/)

Source: https://bettertyped.github.io/react-cards-opening/docs/components/card/