Cards

Reusable Card Components

Explore the deck through reusable Svelte components: wheel placement, flip behavior, RWS reveal variants, and shared sizing rules.

I Wheel Arrangement

Start with the whole cycle. Each card sits in its position on the wheel, and each one flips to its Rider–Waite–Smith counterpart.

Card I

RWS equivalent of card I

Card II

RWS equivalent of card II

Card III

RWS equivalent of card III

Card IV

RWS equivalent of card IV

Card V

RWS equivalent of card V

Card VI

RWS equivalent of card VI

Card VII

RWS equivalent of card VII

Card VIII

RWS equivalent of card VIII

Card IX

RWS equivalent of card IX

Card X

RWS equivalent of card X

Card XI

RWS equivalent of card XI

Card XII

RWS equivalent of card XII

Card XIII

RWS equivalent of card XIII

Card XIV

RWS equivalent of card XIV

Card XV

RWS equivalent of card XV

Card XVI

RWS equivalent of card XVI

Card XVII

RWS equivalent of card XVII

Card XVIII

RWS equivalent of card XVIII

Card XIX

RWS equivalent of card XIX

Card XX

RWS equivalent of card XX

II Flip Interaction

Card I

Click to flip

Click toggles .is-flipped behavior on each card wrapper. Every card flips on its own axis independent of placement and rotation.

Card VI

Front

Card XI

Back

Card XVI

Mid-flip

III RWS Reveal Flip

Variant two: flipping reveals the Rider–Waite–Smith equivalent instead of the shared patterned back.

Card I

RWS equivalent of card I

01-seed.png → 01 Magician

Card X

RWS equivalent of card X

10-light.png → 10 Wheel of Fortune

Card XI

RWS equivalent of card XI

11-harvest.png → 12 Hanged Man

Card XII

RWS equivalent of card XII

12-falling.png → 13 Death

IV Sizes

Card III

sm · 90×129

Card VIII

md · 130×186

Card XIV

default · 160×229

Card XVIII

lg · 200×286

V All Twenty Cards

Card I

Card II

Card III

Card IV

Card V

Card VI

Card VII

Card VIII

Card IX

Card X

Card XI

Card XII

Card XIII

Card XIV

Card XV

Card XVI

Card XVII

Card XVIII

Card XIX

Card XX