Card

A Box with the parts a card is made of laid out on it: a title, a subtitle, a body and a footer. Every Box prop passes straight through, so a card is styled on exactly the same axes as the box it is.

import { Card } from 'neba';

<Card title="Starter" subtitle="One project" footer={<Button>Choose</Button>}>
  Body
</Card>;

Props

Prop	Type	Default	Description
variantshared	'solid' | 'outline' | 'text'	'outline'	Weight of the surface: filled, hairline, or none
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Corner radius, padding, and the type scale of the header and body
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Semantic colour role. The surface is white, so it reaches the hairline and the dividers only
densityshared	'default' | 'compact'	'default'	Padding only — never the height, never the type scale
elevationshared	0 | 1 | 2 | 3	0	Drop shadow depth. Ignored when variant is text
title	ReactNode	—	The heading. Pass a real heading element when it belongs in the document outline
subtitle	ReactNode	—	A second line under the title, one step down the type scale and muted
headerAction	ReactNode	—	Content pinned to the end of the header row — a menu button, a status chip
footer	ReactNode	—	The bottom area, laid out as a wrapping row
dividers	boolean	false	Separates the sections with a hairline instead of space, edge to edge
children	ReactNode	—	The card's body

Takes every Box prop. The one exception is padded, which is omitted because a card redistributes that padding section by section.

Examples

Sections

The sections are props rather than compound sub-components. The arrangement is fixed, and what a caller wants to decide is what goes in each slot, not what order the slots come in. A slot you do not pass is not rendered.

import { Button, Card } from 'neba';

export default function CardSections() {
  return (
    <Card
      className="w-full max-w-md"
      title="Title"
      subtitle="Subtitle"
      headerAction={
        <Button size="xs" variant="text" color="secondary" aria-label="More">
          ⋯
        </Button>
      }
      footer={
        <>
          <Button size="sm" variant="text" color="secondary">
            Cancel
          </Button>
          <Button size="sm" className="ml-auto">
            Confirm
          </Button>
        </>
      }
    >
      The body. A slot you do not pass is not rendered, so a card with only a title has no empty
      header sitting above it.
    </Card>
  );
}

Dividers

Turn dividers on and the sections are separated by a hairline instead of by space. The lines have to reach both edges, so the padding moves from the sheet onto each section.

import { Card } from 'neba';

export default function CardDividers() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-2">
      <Card title="Without" subtitle="separated by space" footer="Footer">
        Body
      </Card>
      <Card dividers title="With" subtitle="separated by a hairline" footer="Footer">
        Body
      </Card>
    </div>
  );
}

Sizes

size sets the sheet's radius and padding together with the type scale of the header and the body. The title sits one step above the body, the subtitle one step below it.

import { Card } from 'neba';

const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

export default function CardSizes() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      {SIZES.map((size) => (
        <Card key={size} size={size} dividers title={`size ${size}`} subtitle="Subtitle">
          Body copy sits one step below the title.
        </Card>
      ))}
    </div>
  );
}

Holding controls

A card is a box, so the controls inside it sit on glass. When the title belongs in the document outline, pass a real heading — title={<h2>…</h2>}. It inherits the card's type scale rather than the browser's.

import { Button, Card, TextField } from 'neba';

export default function CardForm() {
  return (
    <Card
      className="w-full max-w-md"
      size="lg"
      dividers
      title={<h2>Invite a teammate</h2>}
      subtitle="They will get an email with a link."
      footer={
        <>
          <Button variant="text" color="secondary">
            Cancel
          </Button>
          <Button className="ml-auto">Send invite</Button>
        </>
      }
    >
      <div className="flex flex-col gap-3">
        <TextField label="Email" placeholder="[email protected]" fullWidth />
        <TextField label="Note" multiline rows={2} placeholder="Optional" fullWidth />
      </div>
    </Card>
  );
}