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.

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 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.

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