Skip to main content

Card

A theme-aware, flexible Card component that supports header, body, footer, dividers, and clickable states. Use it to display grouped content or interactive panels consistently across your application.

Usage​

Basic usage​

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

<Card>
  <Card.Header>Profile</Card.Header>
  <Card.Body>This is your profile information card.</Card.Body>
</Card>;

With clickable interaction​

<Card clickable hover onClick={() => alert('clicked!')}>
  <Card.Body>Click me</Card.Body>
</Card>
<Card>
  <Card.Header>Invoice</Card.Header>
  <Card.Body>Subtotal: $200</Card.Body>
  <Card.Divider />
  <Card.Footer>Total: $220</Card.Footer>
</Card>

Variants​

Card supports interaction-based variants.

<Card />                  // Default card
<Card hover />            // Hoverable card
<Card clickable />        // Clickable card
<Card clickable hover />  // Clickable + hover

Available variants:

  • default – Standard static card
  • hover – Card with hover effect
  • clickable – Card that responds to click and keyboard interaction

Guidelines:

  • Use hover for subtle visual feedback.
  • Use clickable for cards that trigger actions.
  • Combine clickable and hover for interactive surfaces.

Sizes​

The Card component does not expose predefined size props.

  • Control width and spacing using CSS or layout containers.
  • Use inline styles only for layout-level overrides when necessary.
<Card style={{ width: '300px' }}>
  <Card.Body>Custom width card</Card.Body>
</Card>

States​

<Card clickable disabled>
  <Card.Body>Disabled clickable card</Card.Body>
</ıll>

Supported interaction states:

  • clickable – Enables click behavior with keyboard support
  • hover – Applies hover visual effect
  • disabled – Visual state only (requires guarding logic in onClick)

Native Props and Composition​

Card renders as a semantic <div> and supports standard HTML attributes.

<Card className="my-card" aria-label="User profile card" onClick={handleClick}>
  <Card.Header>Profile</Card.Header>
  <Card.Body>Content here</Card.Body>
</Card>

Composition is achieved via subcomponents rather than configuration props.

Props​

PropTypeDefaultDescription
childrenReact.ReactNode—Content rendered inside the Card
classNamestring""Custom CSS classes
clickablebooleanfalseEnables clickable and keyboard behavior
hoverbooleanfalseEnables hover visual effect
onClick() => void—Click handler (used with clickable)

Subcomponents​

  • Card.Header – Header section
  • Card.Body – Primary content area
  • Card.Footer – Footer section
  • Card.Divider – Visual separator

Behavior Notes​

  • Clickable cards are keyboard accessible.
  • Enter and Space trigger onClick.
  • Hover effects are purely visual.
  • Divider does not introduce additional semantics or interaction.
<Card clickable onClick={() => alert('clicked!')}>
  <Card.Body>Click me</Card.Body>
</Card>

Accessibility​

  • Clickable cards use role="button" and tabIndex={0}.
  • Keyboard interaction supports Enter and Space.
  • Use aria-label when card content alone is insufficient.
  • Non-interactive cards render as standard <div> elements.
<Card clickable aria-label="Open profile">
  <Card.Body>Profile</Card.Body>
</Card>

Layout​

  • Cards are block-level elements by default.
  • Width is determined by parent container unless constrained.
  • Can be expanded to full width using CSS.
<Card style={{ width: '100%' }}>
  <Card.Body>Full-width Card</Card.Body>
</Card>

Best Practices​

Do​

  • Use Card.Header, Card.Body, and Card.Footer for structured content.
  • Use clickable only when the card represents a clear action.
  • Use Divider to visually separate distinct sections.

Don’t​

  • Overload a Card with excessive or unrelated functionality.
  • Place complex navigation or form logic inside a Card.
  • Use clickable without a clear visual or textual affordance.