Card

The recurring "raised surface" idiom behind kanban cards, chart cards, workflow nodes, and highlight cells. A bordered bgSurface container; raised adds a soft float shadow and interactive a hover affordance. Compose with CardHeader / CardBody / CardFooter.

Installation

npm install @crisp-ui-kit/crisp

Props

Usage

import { Card, CardHeader, CardBody, CardFooter } from "@crisp-ui-kit/crisp";

<Card raised>
  <CardHeader icon={<Icon />} action={<Menu … />}>Title</CardHeader>
  <CardBody>…</CardBody>
  <CardFooter><button>Save</button></CardFooter>
</Card>;

Card forwards all div props (e.g. onClick); raised and interactive are booleans.