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.

Paper Duck
Common
Floats. Does not do much else, and is at peace with that.
Window Plant
Uncommon
Grows toward whatever you were about to do next.
Lantern Fox
Rare
Knows a shortcut. Will not say where it comes out.
Storm Bolt
Epic
Strikes the same place twice, on purpose.
Vault Dragon
Legendary
Keeps one of every card ever dealt. This one is its own.
Ash Phoenix
Mythic
Burns down once a century and starts again from the first line.

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 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 as both launch and landing.

Last updated 2026-10-11. Read this page as Markdown.