UI Bridge
Card
Display a bridge card with suit icon and rank.
Import from @workspace/ui-bridge/card/card-display.
CardDisplay
Displays a bridge card as a suit icon followed by the formatted rank. Uses useBridgeEngine().notation internally for variant-specific formatting.
Cards are represented as two-character strings: suit letter (S, H, D, C) followed by rank (A, K, Q, J, T, 9–2).
import { CardDisplay } from '@workspace/ui-bridge/card/card-display';
<CardDisplay card="SA" /> {/* Ace of Spades */}
<CardDisplay card="HK" /> {/* King of Hearts */}
<CardDisplay card="D7" /> {/* 7 of Diamonds */}Gallery
light
Classic · English
AKQJ1098765432
AKQJ1098765432
AKQJ1098765432
AKQJ1098765432
Classic · French
ARDV1098765432
ARDV1098765432
ARDV1098765432
ARDV1098765432
Petit bridge · French
10987654321
10987654321
10987654321
10987654321
dark
Classic · English
AKQJ1098765432
AKQJ1098765432
AKQJ1098765432
AKQJ1098765432
Classic · French
ARDV1098765432
ARDV1098765432
ARDV1098765432
ARDV1098765432
Petit bridge · French
10987654321
10987654321
10987654321
10987654321
Props
Prop
Type