Card

A Box with slots laid out on it for a title, a subtitle, a body and a footer. Use it for content of the same shape shown repeatedly.

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
transitionshared	NebaTransition	—	An entrance animation, run once on mount (transition="grow"). Wrap it in an Animate* component for a trigger or a replay

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

Examples

title · subtitle · headerAction · footer

The sections are props rather than sub-components, and a slot you do not pass is not rendered. headerAction is the control slot at the far end of the title row.

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

Separates the sections with a rule instead of space. The lines have to reach both edges of the sheet, so the padding moves from the Card 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>
  );
}

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

Pass a real heading as title to put it in the document outline: 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>
  );
}