Card

A compound card with header, content, and footer slots in four surface variants.

Data displaylayoutcontainersurface

Workbench

Rendering Card…

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

npx mlola-ui add card

Usage

TSX

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";

export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Team</CardTitle>
        <CardDescription>Four members, two pending invitations.</CardDescription>
      </CardHeader>
      <CardContent>Everyone can edit projects; only owners can change billing.</CardContent>
      <CardFooter>
        <Button size="sm">Invite</Button>
      </CardFooter>
    </Card>
  );
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

HTML

<html data-theme="graphite" data-mode="light">

Examples

A summary with an action

A card groups one subject: its state, a measure of it, and the next step.

Rendering A summary with an action…

HTML

The markup the example above renders, exactly. It needs no script: write it from any language or template.

HTML

<div class="ml-card" data-variant="default">
  <div class="ml-card-header">
    <h3 class="ml-card-title">Team</h3>
    <p class="ml-card-description">Four members, two pending invitations.</p>
  </div>
  <div class="ml-card-content">Everyone can edit projects; only owners can change billing.</div>
  <div class="ml-card-footer">
    <button class="ml-button" type="button" data-variant="primary" data-size="sm"><span class="ml-button-label">Invite</span></button>
  </div>
</div>

Options

Prop	Values	Default
`variant`	`defaultelevatedglassspecular`	`default`

Every prop with a fixed set of values, read from the exported TypeScript types with its doc comment. Open the Code tab above for the rest of the API.

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

Class	Attributes
`ml-card`	`data-interactivedata-variant="elevated \| glass \| specular"`
`ml-card-header`	—
`ml-card-title`	—
`ml-card-description`	—
`ml-card-content`	—
`ml-card-footer`	—

Accessibility and theming

Semantic elements, accessible names and state relationships are part of the contract.
Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
Reduced motion and forced colors keep meaning and operation.

Open the standalone preview