Adv UI

Card

A surface that groups related content and actions.
Stable
Web
iOS
Android
@advui/core
Source
Team planEverything your team needs.
$29
JSX
<Card>
  <Card.Header>
    <Card.Title>Team plan</Card.Title>
    <Card.Description>Everything your team needs.</Card.Description>
  </Card.Header>
  <Card.Content>
    <Text size="3xl" weight="bold">$29</Text>
  </Card.Content>
  <Card.Footer>
    <Button fullWidth>Upgrade</Button>
  </Card.Footer>
</Card>
PropsOpen in Playground
variant

Installation

pnpm
pnpm add @advui/core
npm
npm install @advui/core

Usage

import { Button, Card } from '@advui/core'

<Card>
  <Card.Header>
    <Card.Title>Profile</Card.Title>
    <Card.Description>How others see you.</Card.Description>
  </Card.Header>
  <Card.Content>…</Card.Content>
  <Card.Footer>
    <Button>Save</Button>
  </Card.Footer>
</Card>

Examples

Form card

Create projectDeploy your new project in one click.

Variants

outline
A outline card surface.
elevated
A elevated card surface.
filled
A filled card surface.
ghost
A ghost card surface.

Interactive

Atlas
Live
Updated 2 hours ago
Customer analytics dashboard.

API reference

Card

PropTypeDefaultDescription
variant'outline' | 'elevated' | 'filled' | 'ghost''outline'Surface style.
interactivebooleanfalseHover/press feedback and focus ring. Add `onPress` + `role`/label.

Card.Header

Vertical stack with title and description.

Card.Title

Heading text (`role="heading"`).

Card.Description

Muted supporting text.

Card.Content

Main body with consistent padding.

Card.Footer

Row for actions.

Accessibility

  • Card.Title exposes the heading role so screen-reader users can jump between cards.
  • Interactive cards need role="button" or role="link" and an accessible name; avoid nesting other buttons inside.

Responsive behavior

Padding shrinks from 24px to 16px below the sm breakpoint.

Related components

Separator
Button
Since v0.1.0Last updated Nov 2, 2026Edit this page on GitHub
PreviousCalendar
NextChip