Card

A surface container that groups related content. Compose it with nana-card-header, nana-card-title, nana-card-description, nana-card-content and nana-card-footer.

Preview

Card title A short supporting description. A card groups related content into a single surface. Action

Show code Copy

Installation

npm install @nana-tec/ui-components

Import

import "@nana-tec/ui-components/card";

Basic usage

<nana-card style="max-width:22rem">
  <nana-card-header>
    <nana-card-title>Card title</nana-card-title>
    <nana-card-description>A short supporting description.</nana-card-description>
  </nana-card-header>
  <nana-card-content>A card groups related content into a single surface.</nana-card-content>
  <nana-card-footer>
    <nana-button size="sm">Action</nana-button>
  </nana-card-footer>
</nana-card>

Variants

The variant attribute sets the card’s surface treatment — default, elevated, outlined, filled, or glass.

Default Elevated Outlined Filled Glass

Show code Copy

Interactive

Add the interactive attribute to make the whole card a hoverable, focusable target (e.g. a link card).

Interactive card Hover or focus me Lifts on hover and shows a focus ring.

Show code Copy

API

Properties

Property	Attribute	Type	Default	Description
interactive	—	boolean	false	Adds hover lift, pointer cursor and a focus ring for clickable cards. Composes with any variant.
variant	—	CardVariant	'default'	Visual style

Slots

Slot	Description
(default)	Card sub-sections (header, content, footer)

CSS custom properties

Property	Description
--nana-card-bg	Background colour
--nana-card-color	Text colour
--nana-card-radius	Corner radius

Slots

Slot	Description
(default)	Card sub-sections (header, content, footer)

CSS Variables

Variable	Default	Description
--nana-card-bg	—	Background colour
--nana-card-color	—	Text colour
--nana-card-radius	—	Corner radius

Related components

• Details
• Divider
• Dialog
• Drawer
• Popup

Storybook

Explore Card interactively Every state, prop, and edge case — with live controls — in Storybook.

View in Storybook