Nordstar

Card

A bordered surface that groups related content. Use it to delimit a section, frame a settings block, or contain a feature card on a marketing page.

When to use

  • To group related content into a single visual unit.
  • To distinguish a content block from the surrounding page.
  • For settings panels, preference forms, or summary tiles.

When not to use

  • For full-page layouts — reach for View instead.
  • For inline content where the surrounding text already provides context.

Installation

pnpm add @nordcom/nordstar-card
import { Card } from '@nordcom/nordstar';

Card ships with two sub-components — Card.Header for the title slot and Card.Divider for an inset separator line.

Basic usage

A card with a header, a divider, body content, and an imaginary footer.

Header
Hello world! Content inside the card.
Imaginary footer
import { Card } from '@nordcom/nordstar';

export default function Example() {
    return (
        <Card>
            <Card.Header>Header</Card.Header>
            <Card.Divider />
            Hello world! Content inside the card.
            <Card.Divider />
            Imaginary footer
        </Card>
    );
}

Variants

outline (default) is a thin-bordered surface; solid is a filled block. Combine each with color to escalate emphasis.

variant="solid"
Header
A filled card surface — most useful for emphasized information blocks.
import { Card } from '@nordcom/nordstar';

export default function Example() {
    return (
        <Card variant="solid">
            <Card.Header>Header</Card.Header>
            <Card.Divider />A filled card surface — most useful for emphasized information blocks.
        </Card>
    );
}
color="primary"
Heads up
Use color to flag important content.
import { Card } from '@nordcom/nordstar';

export default function Example() {
    return (
        <Card color="primary">
            <Card.Header>Heads up</Card.Header>
            <Card.Divider />
            Use color to flag important content.
        </Card>
    );
}
variant="solid" color="primary"
Heads up
A filled, colored surface for the strongest emphasis.
import { Card } from '@nordcom/nordstar';

export default function Example() {
    return (
        <Card color="primary" variant="solid">
            <Card.Header>Heads up</Card.Header>
            <Card.Divider />A filled, colored surface for the strongest emphasis.
        </Card>
    );
}

Borderless and padding-less

Drop the border for cards that sit inside other surfaces, or remove the inner padding when you need to control spacing yourself (e.g., a card whose body is a media element that should bleed to the edges).

borderless
Header
A borderless card relies on its background to delimit content.
import { Card } from '@nordcom/nordstar';

export default function Example() {
    return (
        <Card borderless>
            <Card.Header>Header</Card.Header>
            <Card.Divider />A borderless card relies on its background to delimit content.
        </Card>
    );
}
padding={false}
Header
When you want to control padding yourself.
import { Card } from '@nordcom/nordstar';

export default function Example() {
    return (
        <Card padding={false}>
            <Card.Header>Header</Card.Header>
            <Card.Divider />
            <div className="p-3">When you want to control padding yourself.</div>
        </Card>
    );
}
borderless padding={false}
Header
A flush surface — borderless and full-bleed.
import { Card } from '@nordcom/nordstar';

export default function Example() {
    return (
        <Card borderless padding={false}>
            <Card.Header>Header</Card.Header>
            <Card.Divider />
            <div className="p-3">A flush surface — borderless and full-bleed.</div>
        </Card>
    );
}

Composition

Card.Header typically holds a Heading or Label; the body accepts arbitrary content. Card.Divider works inside the card to delimit header from body or body from footer.

<Card>
    <Card.Header>
        <Heading level="h3">Account</Heading>
    </Card.Header>
    <Card.Divider />
    <p>Update your account preferences.</p>
</Card>

For larger compositions, nest a card inside a View to position it within the page layout.

Props

PropTypeDefaultDescription
asAs | undefined——
borderlessboolean | undefined——
colorNordstarColor | undefined——
paddingboolean | undefined——
styleCSSCustomProperties | undefined——
variant"outline" | "solid" | undefined——

Related