Components · shadcn card, alert
Card and notice
A contained soft panel, for forms, login, notices, the event registration panel, the Forms list and admin. Events, articles and members are never cards; they are rows and portraits.
Filled and outline
Registration
Shenzhen Cup 2026
Closes November 7, 23:59 Shenzhen time.
Sign in
Use the campus email you registered with.
Show codeHide code
<Card>
<CardHeader>
<CardKicker>Registration</CardKicker>
<CardTitle>Shenzhen Cup 2026</CardTitle>
<CardDescription>Closes November 7, 23:59</CardDescription>
</CardHeader>
<CardContent>…</CardContent>
<CardFooter><Button variant="primary">Register</Button></CardFooter>
</Card>Link card
The whole card is clickable through its title link, stretched over it; the focus ring moves to the card. Buttons inside sit above the stretched link. Closed forms render as a plain outline card with no link and a “Closed” badge.
Event feedback survey
Closed September 30.
Show codeHide code
<Card variant="link">
<CardHeader>
<CardTitle><CardLink as={NextLink} href="/forms/census">Member census 2026</CardLink></CardTitle>
</CardHeader>
</Card>Notice
A status-tinted fill, a thick leading edge, the status icon and a message. Tones: info (ink), success, warning, danger. Notices that appear after an action pass live: info and success become role="status", warning and danger role="alert".
Show codeHide code
<Alert variant="warning">
<AlertTitle>Interview slot not chosen yet</AlertTitle>
<AlertDescription>Choose one before September 18, 23:59.</AlertDescription>
</Alert>Rules
Don’t
A grid of identical rounded cards, each with an icon on top.
Do
Departure-board rows for events, portraits under division lines for members, a lead plus rows for articles.
- Single column, or at most two side by side. Never three or more identical cards in a row on public pages.
- Never an icon above a card title. Never nest cards.
- Loading is a static
surfaceskeleton of the same shape.