Card v0.1.0 Data display

Composable surface: Root, Header, Title, Description, Content, Footer parts.

import { Card } from "latticeui-react";

Examples

Composed card

API usage

Last 30 days

Requests64%

Show code

<Card.Root>
  <Card.Header>
    <Card.Title>API usage</Card.Title>
    <Card.Description>Last 30 days</Card.Description>
  </Card.Header>
  <Card.Content>
    <Progress label="Requests" value={64} />
  </Card.Content>
  <Card.Footer>
    <Button size="sm" variant="outline">View report</Button>
  </Card.Footer>
</Card.Root>

Interactive

interactive adds a hover affordance for clickable cards.

Hover me - I lift slightly.

Show code

<Card.Root interactive>
  <Card.Content>Hover me - I lift slightly.</Card.Content>
</Card.Root>

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`div`	`[data-scope="card"][data-part="root"]`
`header`	`div`	`[data-scope="card"][data-part="header"]`
`title`	`h3`	`[data-scope="card"][data-part="title"]`
`description`	`p`	`[data-scope="card"][data-part="description"]`
`content`	`div`	`[data-scope="card"][data-part="content"]`
`footer`	`div`	`[data-scope="card"][data-part="footer"]`

Props

Prop	Type	Default	Description
`Root.interactive`	`boolean`	—	Hover affordance for clickable cards.

Accessibility

Roles:

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="card"][data-part="root"] {
  /* your overrides */
}

State attributes: data-interactive