Surface (default)
Applied AI
Applied AI integrates systems, speed turns friction into flow.
<Card>
<CardHeader><CardTitle>Applied AI</CardTitle></CardHeader>
<CardContent>...</CardContent>
<CardFooter><Button>Learn more</Button></CardFooter>
</Card>Variants
Surface
Scalable growth. Systems that evolve with your ambition.
Bordered
Scalable growth. Systems that evolve with your ambition.
Elevated
Scalable growth. Systems that evolve with your ambition.
Filled
Scalable growth. Systems that evolve with your ambition.
<Card />
<Card className="border-2 border-foreground" />
<Card className="border-t-4 border-t-primary" />
<Card className="bg-secondary" />Accessibility
How Card works with assistive tech
- Role
- region (when titled), article (for self-contained content), group (loose)
- Keyboard
- not interactive by default; wrap in Link or Button for interactive cards
- ARIA attributes
- aria-labelledby pointing to title slot id; landmark role optional
- Focus behavior
- visible-3px when interactive (inherited from wrapper)
Decorative red top-rule (elevated variant) must not carry meaning. Border is token-driven via var(--border); adapts to palette.