Introduction

A flexible container for grouping related content, with optional header, body, footer, image, and avatar slots.

Usage

Basic Card

import { Card, Button } from "../components/ui";

export default function MyPage() {
  return (
    <Card
      variant="elevated"
      title="Project title"
      description="A short description of the project."
      body="Main content of the card goes here."
      footer={<Button>View</Button>}
    />
  );
}

Card with Image

import { Card } from "../components/ui";

export default function MyPage() {
  return (
    <Card
      image="/cover.png"
      imagePosition="top"
      title="Card with image"
      body="Content beneath the image."
    />
  );
}

CMS Page Builder

This component is available as a card block in the Page Builder (content/pages/*.json):

{
  "type": "card",
  "title": "Project title",
  "description": "A short description of the project.",
  "body": "Main content of the card goes here.",
  "variant": "elevated",
  "boxShadow": "lg",
  "overflow": "visible"
}

A CMS card defaults boxShadow to "sm" even when unset, so setting some other layout-style field (e.g. margin) doesn't silently zero out the recipe's own default shadow. overflow overrides the card's default overflow: hidden (which normally clips the image slot to the border radius) — set it to "visible" when the card contains an unportaled overlay (Popover, Dropdown, Select, DatePicker, ColorPicker, HoverCard) that would otherwise be clipped at the card boundary. boxShadow and the other shared layout-style fields (margin/padding/maxWidth/borderRadius/backgroundColor/ backgroundImage/backgroundFit/textAlign/opacity) are documented once, for every block that supports them, under Page Builder → Advanced Escape Hatches.

Props

Card

| title | `string \ | JSX.Element` | The card title. | | description | `string \ | JSX.Element` | The card description. | | body | `string \ | JSX.Element` | The main body content. | | footer | `string \ | JSX.Element` | Footer content. |

| avatar | JSX.Element | Element shown in the header (e.g. an avatar). | | headerAction | JSX.Element | Element shown at the end of the header (e.g. a menu). |

| image | `string \ | JSX.Element` | Image source or element. |

| imagePosition | `"top" \ | "bottom" \ | "left" \ | "right"` | Where the image is placed. Default: "top". |

| headerClass | string | Custom CSS classes for the header. | | bodyClass | string | Custom CSS classes for the body. | | footerClass | string | Custom CSS classes for the footer. | | imageClass | string | Custom CSS classes for the image. |

| variant | `"elevated" \ | "outline" \ | "subtle"` | The visual style of the card. |

| overflow | CSS overflow | Overrides the card's default overflow: hidden. CMS-only field — set to "visible" for a card containing an unportaled overlay (Popover, Dropdown, ColorPicker, etc). |

| interactive | boolean | Enable client-side hydration. | | class | string | Custom CSS classes for the root element. |