Card

A surface that groups related content.

Props#

Name	Type	Default	Description
`title`	`string`	—	Title rendered as the card header. Optional.
`padding`	`"sm" \| "md" \| "lg"`	`md`	Inner padding preset.
`elevated`	`boolean`	`false`	Apply a soft drop shadow for higher elevation.
`children`*	`ReactNode`	—	Card body content.

Basic#

Show code

Basic.stories.tsx

import { Card } from '../../../src/pixie/Card.js';
import { Button } from '../../../src/pixie/Button.js';

export default () => (
  <Card title="Bookmark">
    <p style={{ margin: '0 0 0.75rem' }}>
      The full Markbook source lives at github.com/doidor/markbook.
    </p>
    <Button>Open</Button>
  </Card>
);

Elevated#

Show code

Elevated.stories.tsx

import { Card } from '../../../src/pixie/Card.js';

export default () => (
  <Card title="Elevated" elevated>
    <p style={{ margin: 0 }}>
      Cards with the <code>elevated</code> flag get a soft drop shadow for higher visual emphasis.
    </p>
  </Card>
);

Padding sizes#

Show code

import { Card } from '../../../src/pixie/Card.js';
import styles from './PaddingSizes.module.css';

export default () => (
  <div className={styles.row}>
    <Card title="sm" padding="sm">
      Tight
    </Card>
    <Card title="md" padding="md">
      Default
    </Card>
    <Card title="lg" padding="lg">
      Roomy
    </Card>
  </div>
);

.row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}