Card

A composable, accessible Card component for modern React applications.

import { Card } from '@nofinite/nui';

Interactive Preview

A flexible container component used to group related content and actions. Supports structured sections (Header, Body, Footer, Divider), hover elevation, and clickable behavior with built-in accessibility.

Usage

Basic Card

import { Card } from '@nofinite/nui';

<Card>
  <Card.Header>Card Title</Card.Header>
  <Card.Body>
    This is the card content area where you can place text or elements.
  </Card.Body>
</Card>;

Card with Footer

<Card>
  <Card.Header>Project</Card.Header>

  <Card.Body>Manage project details and tasks.</Card.Body>

  <Card.Footer>
    <Button size="sm">Edit</Button>
    <Button size="sm" variant="outline">
      View
    </Button>
  </Card.Footer>
</Card>

Clickable Card

<Card clickable onClick={() => console.log('Clicked')}>
  <Card.Header>Interactive Card</Card.Header>
  <Card.Body>Entire card behaves like a button.</Card.Body>
</Card>

Hover Elevation Card

<Card hover>
  <Card.Header>Hover Card</Card.Header>
  <Card.Body>Card elevates visually on hover.</Card.Body>
</Card>

Card with Divider

<Card>
  <Card.Header>Pricing</Card.Header>

  <Card.Body>Basic plan features</Card.Body>

  <Card.Divider />

  <Card.Footer>
    <Button variant="primary">Upgrade</Button>
  </Card.Footer>
</Card>

Subcomponents

Card.Header

Container for card titles or heading content.

Card.Body

Primary content area of the card.

Card.Footer

Action or metadata area typically placed at the bottom.

Card.Divider

Full-width separator for visual grouping.

States / Behavior

Layout & Structure

Accessibility

• Clickable cards expose button semantics using role="button" and tabIndex=0
• Keyboard interaction supported via Enter and Space triggers
• Focus-visible ring ensures keyboard discoverability
• Divider uses semantic <hr>
• Header, Body, and Footer preserve structural grouping

Best Practices

Do

• Use cards to group related content and actions
• Use clickable cards for dashboards, lists, or navigation surfaces
• Keep header concise and descriptive
• Use divider to separate logical sections

Don’t

• Place critical interactive controls inside a clickable card without clear affordance
• Overload cards with excessive content
• Use clickable cards for destructive actions
• Nest too many cards creating visual clutter

API Reference