Skip to content
Caps0.4.0
API reference

components/trading-card

Import

Section titled “Import”
Import
import * as api from "@fungi.computer/caps/components/trading-card";

Exports

Section titled “Exports”
Kind Export Description
type alias TradingCardFinish Print finish: holo adds a foil sheen on hover that stills for reduced motion.
type alias TradingCardFact One footer fact, printed like a trading card’s weakness or retreat line.
type alias TradingCardMove The card’s one move: a cost of symbols, a name, and caller-owned text or controls.
type alias TradingCardProps Props accepted by TradingCard.
constant TradingCard A 63:88 trading card: a bright rim, a name bar with a stage and stat, an art window, one move row that can hold a real form, a flavor line and a footer of facts with a set number and rarity mark. The move body is caller-owned, so a form inside it keeps its own labels, focus and errors.

TradingCardFinishtype alias

Section titled “TradingCardFinish”
Signature
type TradingCardFinish = "standard" | "holo";

Print finish: holo adds a foil sheen on hover that stills for reduced motion.

TradingCardFacttype alias

Section titled “TradingCardFact”
Signature
type TradingCardFact = Readonly<{
  label: string;
  value: ReactNode;
}>;

One footer fact, printed like a trading card’s weakness or retreat line.

TradingCardMovetype alias

Section titled “TradingCardMove”
Signature
type TradingCardMove = Readonly<{
  cost?: ReactNode;
  name: string;
  value?: ReactNode;
  children?: ReactNode;
}>;

The card’s one move: a cost of symbols, a name, and caller-owned text or controls.

TradingCardPropstype alias

Section titled “TradingCardProps”
Signature
type TradingCardProps = Omit<
  HTMLAttributes<HTMLElement>,
  "title" | "children"
> &
  object;

Props accepted by TradingCard.

Type Declaration

Section titled “Type Declaration”
Name Type Description
name string -
stage? string A small stage label printed before the name, such as “Spore”.
stat? ReactNode The stat printed at the right of the name bar, such as “60 SP”.
typeLine? string The type line under the art window.
art ReactNode -
move TradingCardMove -
flavor? ReactNode -
facts? readonly TradingCardFact[] -
setNumber? string Collector number, such as “001/001”.
rarity? ReactNode A small rarity mark printed by the set number.
finish? TradingCardFinish -

TradingCardconstant

Section titled “TradingCard”
Signature
const TradingCard: ForwardRefExoticComponent<
  Omit<HTMLAttributes<HTMLElement>, "title" | "children"> &
    object &
    RefAttributes<HTMLElement>
>;

A 63:88 trading card: a bright rim, a name bar with a stage and stat, an art window, one move row that can hold a real form, a flavor line and a footer of facts with a set number and rarity mark. The move body is caller-owned, so a form inside it keeps its own labels, focus and errors.