Card

A surface container for grouping related content. Card is a set of composable elements — header, title, description, content, and footer — built on the semantic surface tokens, so it adapts to light and dark themes automatically.

Anatomy

Project Atlas

Updated 2 hours ago

A shared component library that lets product teams ship consistent, accessible interfaces faster.

Open

Dismiss

card.html

html

1	<nana-card>
2	<nana-card-header>
3	<nana-card-title>Project Atlas</nana-card-title>
4	<nana-card-description>Updated 2 hours ago</nana-card-description>
5	</nana-card-header>
6	<nana-card-content>
7	A shared component library that lets product teams ship faster.
8	</nana-card-content>
9	<nana-card-footer>
10	<nana-button variant="primary" size="sm">Open</nana-button>
11	<nana-button variant="ghost" size="sm">Dismiss</nana-button>
12	</nana-card-footer>
13	</nana-card>

Variants

Variants describe visual appearance — pick one for the look you need, not the use case.

Default

variant="default"

Subtle border and a hairline shadow — the everyday card.

Elevated

variant="elevated"

A larger shadow lifts it above the page — good for featured content.

Outlined

variant="outlined"

Border only, no shadow — clean and flat for data-dense UIs.

Filled

variant="filled"

A tinted surface that groups content without a frame.

variants.html

html

1	<nana-card variant="default">…</nana-card>
2	<nana-card variant="elevated">…</nana-card>
3	<nana-card variant="outlined">…</nana-card>
4	<nana-card variant="filled">…</nana-card>

Glass

Glassmorphism

variant="glass"

Semi-transparent with a backdrop blur. Place it over imagery or a gradient for a modern, layered feel.

glass.html

html

1	<!-- Glass works best over imagery or a gradient -->
2	<nana-card variant="glass">…</nana-card>

Interactive

Hover or focus me

Lifts and scales on hover, shows a focus ring

interactive is a modifier that composes with any variant. Pair it with tabindex="0" (or wrap the content in a link) so it's keyboard reachable.

interactive.html

html

1	<nana-card variant="elevated" interactive tabindex="0">…</nana-card>

Content Only

A card with only content keeps even padding on every side — no header required.

content-only.html

html

1	<nana-card>
2	<nana-card-content>Even padding on all sides when used alone.</nana-card-content>
3	</nana-card>

Customization

Choose a variant for the look; when you need to match a brand, three CSS variables cover colour and radius.

Branded panel

Themed with 3 variables

Set the background, text colour and radius to fit your system.

card.css

css

1	/* Pick a variant first; reach for variables only to match a brand. */
2	.featured {
3	--nana-card-bg: #0b1220;
4	--nana-card-color: #e5edff;
5	--nana-card-radius: 1rem;
6	}

CSS Variable	Description
`--nana-card-bg`	Background colour
`--nana-card-color`	Text colour
`--nana-card-radius`	Corner radius

Import

A single import registers every card element.

main.ts

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

Elements

Element	Description
`nana-card`	The surface container. Holds `variant` and `interactive`.
`nana-card-header`	Top section — wraps the title and description.
`nana-card-title`	Heading text.
`nana-card-description`	Muted supporting text under the title.
`nana-card-content`	The main body.
`nana-card-footer`	Bottom section — typically actions.

Props (nana-card)

Attribute	Type	Default	Description
`variant`	`default \| elevated \| outlined \| filled \| glass`	`default`	Visual appearance
`interactive`	`boolean`	`false`	Hover lift + keyboard focus ring for clickable cards