Skip to main content
Urbicon UI
source

Card

Flexible container for grouping related content with headers, footers, and interactive states.

Card Title
Optional subtitle
Cards group related content. Change variant and padding to see different looks.
Loading syntax highlighting...

01 Examples

Choosing a variant

`quiet` is the default — a barely-tinted in-page zone, no border, no shadow. `outlined` adds a quiet outline when you need architectural delineation. `elevated` lifts the card with a shadow only. `floating` is for popover-family surfaces above arbitrary backgrounds.

Quiet – subtle tint, default

Outlined – border only

Elevated – shadow only

Floating – popover surface

Loading syntax highlighting...

Stat tile

Compact KPI summary — pair a metric with a delta and trend hint.

Monthly Revenue

$48,210

+12.4% vs. last month
Loading syntax highlighting...

Profile card with header & footer

The `header` and `footer` snippets render in semantically appropriate positions. Set `dividers` to draw hairline separators between header, body and footer for a more structured look.
Project Update New

The latest build passed all 142 tests. Deployment is scheduled for Monday.

Loading syntax highlighting...

Clickable navigation card

Set `href` to render as `<a>` or `onclick` to render as `<button>` — hover styles activate automatically. Pair with `mint="scale"` for a subtle press affordance.
→

Read the documentation

Browse component APIs, design tokens, and integration guides.

02 Customization

Gradient Feature Card

A bold hero card with gradient background and glass overlay.
Pro Feature

Advanced Analytics

Real-time dashboards, custom reports, and AI-powered insights for your team.

Loading syntax highlighting...

Glass Pricing Card

Glassmorphism card over a colorful background.

Premium

$29/mo

  • ✓ Unlimited projects
  • ✓ Priority support
  • ✓ Custom integrations
Loading syntax highlighting...

Dark Minimal

Sleek card with dark surface and accent border — useful on light page backgrounds where the contrast itself is the design.
⚡

Lightning Fast

Zero-config bundling with sub-second hot reload and tree-shaking built in.

Loading syntax highlighting...

03 Accessibility

Built-in ARIA

Cards render as <div> by default. When clickable or onclick is set, the card renders as <button>. When href is provided, it becomes an <a>. Disabled cards set aria-disabled.

Keyboard

Interactive cards are focusable via Tab and activate with Enter / Space. Non-interactive cards are skipped in the tab order.

Structure

Header and footer snippets are rendered in semantically appropriate positions. Use headings inside headers to create a scannable document outline for screen readers.

04 API Reference

18 props
18 props

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...
llm.txt