CatBut — Card.tsxdefault · elevated · outlined · ghost

Card.tsx

Variants

variant="default" | "elevated" | "outlined" | "ghost"

Default

background + bordure fine

Elevated

box-shadow, pas de bordure

Outlined

fond transparent, bordure colorée

Ghost

aucun fond, aucune bordure

Card.tsx

Header / Footer

header / footer — tous les variants

Header

Carte avec header et footer

Footer · il y a 2h
PixelStream

Header seul, sans footer

Footer seul, sans header

3 commentaires+12

Card.tsx

Padding & Radius

padding personnalisé

padding=8

padding=20 (défaut)

padding=40

padding="24px 48px"

radius personnalisé

radius=0

radius=12 (défaut)

radius=24

radius="50%"

Card.tsx

Cliquable & lien

onClick — curseur pointer + lift au hover/active

onClick

clique-moi

onClick + elevated

lift au survol

href — rendu en <a>

Lien externe

href="https://example.com"

Lien interne (#)

variant ghost cliquable

Card.tsx

Exemples de cas réels

profil streamer

PixelStream

en ligne · 1.2k viewers

Speedrun Hollow Knight % any — !duel ouvert

Notification

🎉 RAID de StellaPlays

88 viewers rejoignent le stream

1 248
followers
87
subs
5 210
bits

grille de pricing

Free

0€

commandes, events, mini-jeux

Pro

9€/mo

commandes, events, mini-jeux

Studio

29€/mo

commandes, events, mini-jeux

liste compacte (ghost, sans bordure)

nekoStream a raché

PixelFan gagne le duel

ZeroRogue !lurk

mira_tv SUB x3

CatBut · Card.tsx · default · elevated · outlined · ghost · header · footer · href · onClick