Skip to content

Card

A bordered surface with a title, body and footer.

250 gWhole bean

import { Badge, Button, Card } from '@brand-studio/ui';

export default function CardDemo() {
  return (
    <div style={{ width: '100%', maxWidth: 360 }}>
      <Card
        title="Ethiopia Guji"
        description="Washed, light roast. Peach, jasmine and black tea."
        footer={<><Button>Add to basket</Button><Button tone="secondary">Details</Button></>}
      >
        <div style={{ display: 'flex', gap: 8 }}><Badge>250 g</Badge><Badge tone="outline">Whole bean</Badge></div>
      </Card>
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, Card } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { Card } from '@brand-studio/ui';

<Card title="Ethiopia Guji" description="Washed, light roast." footer={<Button>Add</Button>}>
  …
</Card>

Accessibility

Renders an <article> with the title as an <h3>.

API Reference

Prop	Type	Default
`title?`	`React.ReactNode`	–
`description?`	`React.ReactNode`	–
`footer?`	`React.ReactNode`	–

Also accepts every HTMLAttributes<HTMLElement> attribute.