Bridge Training
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 */}

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