Card

Container for grouping related content.

import { Card } from "@ninna-ui/data-display"

pnpm add @ninna-ui/data-display

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Card component in your application.

import { Card } from "@ninna-ui/data-display";
import { Button } from "@ninna-ui/primitives";

export default function Example() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Title</Card.Title>
        <Card.Description>Description</Card.Description>
      </Card.Header>
      <Card.Body>Content here</Card.Body>
      <Card.Footer>
        <Button size="sm">Action</Button>
      </Card.Footer>
    </Card>
  );
}

Basic

A basic card with header, body, and footer.

Card Title

A brief description of the card content.

This is a basic card with header, body, and footer sections.

Variants

Card supports outline, elevated, filled, and ghost styles.

outline

Card variant

Content for outline variant.

elevated

Card variant

Content for elevated variant.

filled

Card variant

Content for filled variant.

ghost

Card variant

Content for ghost variant.

Interactive

Cards with hover and focus styles for clickable use cases.

Clickable

Hover to see the effect.

Static

No hover effect.

API Reference

Complete list of props for the Card component and its sub-components.

Card (Root)

Prop	Type	Default	Description
`variant`	`'outline' \| 'elevated' \| 'filled' \| 'ghost'`	`'outline'`	Visual style variant
`interactive`	`boolean`	`false`	Enable hover and focus styles for clickable cards
`className`	`string`	-	Additional CSS classes

Card.Header

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Card.Title

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Accessibility

Card uses semantic HTML with proper heading hierarchy
Interactive cards receive focus styles and are keyboard navigable
Card content is read naturally by screen readers