Components

Card

Keeps related content and actions together on one surface.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { Card } from '@bigbang/ui';
Source: Card.tsx
Storybook: Card · Playground

Card is in the @bigbang/ui package. Installation and style files are the same as for Button; see the Button code tab.

import { Card } from '@bigbang/ui';

<Card>
  <Card.Header>
    <Card.Title>Card title</Card.Title>
    <Card.Description>Card description goes here.</Card.Description>
  </Card.Header>
  <Card.Body>Card content</Card.Body>
</Card>;

The part prop types are exported too: CardHeaderProps, CardTitleProps, CardDescriptionProps, CardActionsProps, CardBodyProps, CardFooterProps, CardLinkProps.

Props

variant

Description: How the card separates from the page: outlined has a 1 px border, elevated a shadow, filled a tinted surface.
Type: 'outlined' | 'elevated' | 'filled'
Default: 'outlined'

padding

Description: Inner padding and the gap between parts: 12, 16 or 24 px. Use lg for a single card on a page, md in grids and sm in dense lists and side panels.
Type: 'sm' | 'md' | 'lg'
Default: 'md'

interactive

Description: The whole card opens one destination: it lifts on hover and shows the focus ring of its Card.Link. Put exactly one Card.Link in the title.
Type: boolean
Default: false

render

Description: Renders the root as another element, such as <article /> or <li />. A card with a Card.Title is a <section> by default.
Type: ReactElement | ComponentRenderFn<HTMLProps, {}>

className

Description: For layout only: margins, width and grid placement. Do not use it to change colour or padding.
Type: string

children

Description: The card parts: Card.Header, Card.Body and Card.Footer, or any content.
Type: ReactNode

Native attributes (id, aria-*) pass through to the root element.

Parts

Part	Element	Props
`Card.Header`	`<div>`	Native attributes. With `Card.Actions` inside it becomes a two-column grid.
`Card.Title`	`<h2>`-`<h6>`	`level` (default `3`). Names the card region; the card sets its `id`.
`Card.Description`	`<p>`	Native attributes.
`Card.Actions`	`<div>`	Native attributes. Sits above the link (`z-1`).
`Card.Body`	`<div>`	Native attributes.
`Card.Footer`	`<div>`	Native attributes. Sits above the link (`z-1`).
`Card.Link`	`<a>`	Native link attributes and `render` (for a router link).

Data attributes

data-component="card", data-variant, data-interactive: on the root.
data-part: header, title, description, actions, body, footer, link.

Router link

import { Card } from '@bigbang/ui';
import { Link } from 'react-router';

<Card interactive>
  <Card.Title>
    <Card.Link render={<Link to="/records/42" />}>Card title</Card.Link>
  </Card.Title>
</Card>;

Cards in a list

<ul className="grid gap-xl md:grid-cols-3">
  {items.map((item) => (
    <Card key={item.id} render={<li />}>
      <Card.Title>{item.title}</Card.Title>
    </Card>
  ))}
</ul>