# Custom card face

The ready-made face shows a pixel glyph, a name, a tier and a line of text. Your cards probably have art, numbers, a set symbol. `renderFace` replaces everything inside the card's frame and keeps everything around it: the flight, the turn, the tier's colour and its show.

> Live preview: see it play at https://bettertyped.github.io/react-cards-opening/docs/guides/custom-card-face/
>
> The same reveal around a face with a picture window and three numbers.

## renderFace

```tsx
<CardOpening
  opening={hunt.opening}
  renderFace={(card, { tone, tier }) => (
    <>
      <img className="rco-line face-art" src={card.image} alt="" />
      <p className="rco-line face-name">{card.name}</p>
      <p className="rco-line face-kind" style={{ color: tone }}>
        {tier.label} creature
      </p>
    </>
  )}
  readingOf={(card, { tier }) => [card.name, `${tier.label} creature`]}
/>
```

- The face is a flex column with the card's padding. Give the part that should take the spare room `flex: 1`.
- `info.tone` is the tier's colour on the theme and `info.tier` is the tier itself, label included.
- `CardHunt` and `Card` take the same function.

## Keep the rise-in

When a card turns over, every element with the class `rco-line` rises 14 pixels and fades in, one after another in the order they are written. Put the class on each row of your face. Rows without it are simply there when the card turns.

## Say what there is to read

A card stays face up for as long as its text takes to read. The library can count the ready-made face's words; it cannot see yours. `readingOf` returns every run of text on the face. Without it the card gets the shortest hold its tier allows.

## Sizes that scale

A revealed card is 300 pixels wide. A [Card](https://bettertyped.github.io/react-cards-opening/docs/components/card/) standing still can be any width, and its contents scale with it. For your face to do the same, size it in the card's own unit: `--rco-u` is one pixel in the reveal and one three-hundredth of the width on a standing card.

```css
.face-name {
  font-size: calc(22 * var(--rco-u, 1px));
  font-weight: 600;
  margin-top: calc(12 * var(--rco-u, 1px));
}

.face-art {
  flex: 1;
  min-height: 0;
  object-fit: cover;
  border-radius: calc(14 * var(--rco-u, 1px));
}
```

## The back

```tsx
<CardOpening opening={hunt.opening} renderBack={() => <img src="/card-back.svg" alt="" />} />
```

The back is a centred grid on a soft glow in the theme's accent. Whatever you render sits in the middle of it. The glowing edge that shows the tier before the turn is drawn around it either way.

## Related

- [Card](https://bettertyped.github.io/react-cards-opening/docs/components/card/)
- [CardOpening](https://bettertyped.github.io/react-cards-opening/docs/components/card-opening/)
- [PixelGlyph](https://bettertyped.github.io/react-cards-opening/docs/components/pixel-glyph/)
- [Show plan](https://bettertyped.github.io/react-cards-opening/docs/core/show-plan/)

Source: https://bettertyped.github.io/react-cards-opening/docs/guides/custom-card-face/