Card

Card component for displaying content in a container with padding and a shadow.

Basic

Basic card

This is a basic padded card. Use hasPadding and hasBorder to adjust padding and the header divider.

Show code

Hide code

import { Card } from '@mylighthouse/prism-react';

export default function BasicExample(): React.JSX.Element {
  return (
    <Card>
      <Card.Header>
        <Card.Header.Title>Basic card</Card.Header.Title>
      </Card.Header>
      <Card.Content>
        <p className="text-300--regular">
          This is a basic padded card. Use <code>hasPadding</code> and{' '}
          <code>hasBorder</code> to adjust padding and the header divider.
        </p>
      </Card.Content>
      <Card.Footer>
        <p className="text-300--regular">Footer actions / meta</p>
      </Card.Footer>
    </Card>
  );
}

Padding & divider

hasPadding controls the content padding and defaults to true. The header divider is separate, via hasBorder on Card.Header, so the two compose freely.

Padded (default)

Standard internal padding.

Adds a divider under the header and clears the content of it.

No padding

You control spacing completely.

Keeps the divider while the content stays edge to edge.

Show code

Hide code

import { Button, Card } from '@mylighthouse/prism-react';

export default function PaddingAndBorderExample(): React.JSX.Element {
  return (
    <div className="flex flex-wrap gap-300 items-start">
      <Card>
        <Card.Header>
          <Card.Header.Title>Padded (default)</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <p className="text-300--regular">Standard internal padding.</p>
        </Card.Content>
      </Card>
      <Card>
        <Card.Header hasBorder>
          <Card.Header.Title>Padded, bordered header</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <p className="text-300--regular">
            Adds a divider under the header and clears the content of it.
          </p>
        </Card.Content>
      </Card>
      <Card hasPadding={false}>
        <Card.Header>
          <Card.Header.Title>No padding</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <div className="flex flex-col gap-100">
            <p className="text-300--regular">You control spacing completely.</p>
            <Button size="small">Action</Button>
          </div>
        </Card.Content>
      </Card>
      <Card hasPadding={false}>
        <Card.Header hasBorder>
          <Card.Header.Title>No padding, bordered header</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <p className="text-300--regular">
            Keeps the divider while the content stays edge to edge.
          </p>
        </Card.Content>
      </Card>
    </div>
  );
}

Header After

Use <Card.Header.After> to append controls on the right side of the header.

Use <Card.Header.After> for right-aligned controls.

Show code

Hide code

import { Button, Card } from '@mylighthouse/prism-react';

export default function HeaderAfterExample(): React.JSX.Element {
  return (
    <Card>
      <Card.Header hasBorder>
        <Card.Header.Title>Header after</Card.Header.Title>
        <Card.Header.After>
          <Button size="small">Add</Button>
        </Card.Header.After>
      </Card.Header>
      <Card.Content>
        <p className="text-300--regular">
          Use <code>{'<Card.Header.After>'}</code> for right-aligned controls.
        </p>
      </Card.Content>
    </Card>
  );
}

Variants & Nesting

isSecondary reduces internal spacing; isParent adds an outer border and subdued background for nested cards; disabled applies a disabled state to the card title.

Secondary

Reduced internal spacing and title style.

Parent

Secondary child

Content

Disabled title

Content

Show code

Hide code

import { Card } from '@mylighthouse/prism-react';

export default function VariantsNestingExample(): React.JSX.Element {
  return (
    <div className="flex flex-wrap gap-300 items-start">
      <Card isSecondary>
        <Card.Header>
          <Card.Header.Title>Secondary</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <p className="text-300--regular">
            Reduced internal spacing and title style.
          </p>
        </Card.Content>
      </Card>
      <Card hasPadding={false} isParent>
        <Card.Header>
          <Card.Header.Title>Parent</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <div className="p-400">
            <Card isSecondary>
              <Card.Header>
                <Card.Header.Title>Secondary child</Card.Header.Title>
              </Card.Header>
              <Card.Content>
                <p className="text-300--regular">Content</p>
              </Card.Content>
            </Card>
          </div>
        </Card.Content>
      </Card>
      <Card>
        <Card.Header>
          <Card.Header.Title disabled>Disabled title</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <p className="text-300--regular">Content</p>
        </Card.Content>
      </Card>
    </div>
  );
}

API Reference

Card

Name	Default	Type	Description
`hasPadding`	--	`boolean`	--
`isParent`	--	`boolean`	--
`isSecondary`	--	`boolean`	--

Card.Header

Name	Default	Type	Description
`hasBorder`	--	`boolean`	--

Card.Header.Title

Name	Default	Type	Description
`disabled`	--	`boolean`	--

Card.Header.After

No component-specific props

Card.Content

No component-specific props

Card.Footer

No component-specific props