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, soft, solid, 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.

Colors

Card can be themed with predefined brand and semantic colors.

outline Variant

NEUTRAL

Example of a outline card using the neutral theme color.

outline::neutral

PRIMARY

Example of a outline card using the primary theme color.

outline::primary

SECONDARY

Example of a outline card using the secondary theme color.

outline::secondary

ACCENT

Example of a outline card using the accent theme color.

outline::accent

SUCCESS

Example of a outline card using the success theme color.

outline::success

DANGER

Example of a outline card using the danger theme color.

outline::danger

WARNING

Example of a outline card using the warning theme color.

outline::warning

INFO

Example of a outline card using the info theme color.

outline::info

soft Variant

NEUTRAL

Example of a soft card using the neutral theme color.

soft::neutral

PRIMARY

Example of a soft card using the primary theme color.

soft::primary

SECONDARY

Example of a soft card using the secondary theme color.

soft::secondary

ACCENT

Example of a soft card using the accent theme color.

soft::accent

SUCCESS

Example of a soft card using the success theme color.

soft::success

DANGER

Example of a soft card using the danger theme color.

soft::danger

WARNING

Example of a soft card using the warning theme color.

soft::warning

INFO

Example of a soft card using the info theme color.

soft::info

solid Variant

NEUTRAL

Example of a solid card using the neutral theme color.

solid::neutral

PRIMARY

Example of a solid card using the primary theme color.

solid::primary

SECONDARY

Example of a solid card using the secondary theme color.

solid::secondary

ACCENT

Example of a solid card using the accent theme color.

solid::accent

SUCCESS

Example of a solid card using the success theme color.

solid::success

DANGER

Example of a solid card using the danger theme color.

solid::danger

WARNING

Example of a solid card using the warning theme color.

solid::warning

INFO

Example of a solid card using the info theme color.

solid::info

elevated Variant

NEUTRAL

Example of a elevated card using the neutral theme color.

elevated::neutral

PRIMARY

Example of a elevated card using the primary theme color.

elevated::primary

SECONDARY

Example of a elevated card using the secondary theme color.

elevated::secondary

ACCENT

Example of a elevated card using the accent theme color.

elevated::accent

SUCCESS

Example of a elevated card using the success theme color.

elevated::success

DANGER

Example of a elevated card using the danger theme color.

elevated::danger

WARNING

Example of a elevated card using the warning theme color.

elevated::warning

INFO

Example of a elevated card using the info theme color.

elevated::info

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' \| 'soft' \| 'solid'`	`'outline'`	Visual style variant
`color`	`'primary' \| 'secondary' \| 'accent' \| 'neutral' \| 'success' \| 'danger' \| 'warning' \| 'info'`	-	Color theme of the card
`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