Card

Cards collect and divide content into designated areas. Cards can be actionable themselves or have actionable elements within.

Overview

Resources

Install


yarn add @camp/card

Upgrading to Next Gen

🎨 Updated Color Palette & Style Refresh: Aligned styling with our refreshed brand standards, delivering a modernized and cohesive look and feel.

Migration steps

Update import path: Replace the old Card imports with Card from @camp/card.
Update prop values:

disabled: used to disable an actionable card and prevent any interactions with it. Note: you will need to manually set any buttons to be disabled within it.
dismissLabel: used to pass a translated string to the dismiss icon
onDismiss: when actionable is false, this can be used to pass a function when the dismiss button is clicked.
selected: actionable cards can be shown with a selected state

New <CardContent> component: The <CardContent> component is a wrapper for the content inside of a card. It provides the correct padding and spacing for the content inside of a card.

Variations

Default card

Use the default card in most cases when looking to group related content together. Card is the outer container that defines outer styling including padding/border, and CardContent is the inner container which handles laying out the inner content correctly.


import { Card, CardContent } from '@camp/card';
import { Chip } from '@camp/chip';
import { Button } from '@camp/button';
 
<Card>
  <CardContent
    title="Title"
    paragraph="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    renderChips={() => (
      <div style={{ display: 'flex', gap: Space[2] }}>
        <Chip type="default" color="ac-blue">
          Chip
        </Chip>
        <Chip type="default" color="moss">
          Chip
        </Chip>
      </div>
    )}
    renderActions={() => (
      <div style={{ display: 'flex', gap: Space[3] }}>
        <Button size="small" appearance="secondary">
          Card action
        </Button>
        <Button size="small" appearance="secondary">
          Card action
        </Button>
      </div>
    )}
  />
</Card>;

Card with Image

There is also a way for the card to have image content.


import { Card, CardContent } from '@camp/card';
import { Chip } from '@camp/chip';
import { Button } from '@camp/button';
 
<Card>
  <CardContent
    title="Title"
    paragraph="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    renderImage={() => <img src="https://picsum.photos/id/76/180/250" alt="Bicycle" />}
    renderChips={() => (
      <div style={{ display: 'flex', gap: Space[2] }}>
        <Chip type="default" color="ac-blue">
          Chip
        </Chip>
        <Chip type="default" color="moss">
          Chip
        </Chip>
      </div>
    )}
    renderActions={() => (
      <div style={{ display: 'flex', gap: Space[3] }}>
        <Button size="small" appearance="secondary">
          Card action
        </Button>
        <Button size="small" appearance="secondary">
          Card action
        </Button>
      </div>
    )}
  />
</Card>;

Actionable card

An actionable card can be interacted with. Hover/click on the card below to see.


import { Card, CardContent } from '@camp/card';
 
<Card actionable>
  <CardContent
    title="Title"
    paragraph="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  />
</Card>;

Disabled Card

You can make an actionable card disabled, preventing interaction. Note: you will need to manually set any buttons to be disabled within it.


import { Card, CardContent } from '@camp/card';
 
<Card actionable disabled>
  <CardContent
    title="Title"
    paragraph="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  />
</Card>;

Selected Card

You can add a selected state to an actionable card.


import { Card, CardContent } from '@camp/card';
 
<Card actionable selected>
  <CardContent
    title="Title"
    paragraph="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  />
</Card>;

With Dismiss

You can also add a dismiss button to the card. This is useful for cards that are not actionable, but you want to give the user the option to dismiss them. You should add a label to the dismiss button for accessibility.


import { Card, CardContent } from '@camp/card';
 
<Card onDismiss={() => alert('Card dismissed')} dismissLabel="Dismiss">
  <CardContent
    title="Title"
    paragraph="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  />
</Card>;

Usage

Best practices

✅ DO

Do use to visually separate content that is meant to draw focus. Use cards with dropshadows for the most important information on the page.

🚫 DON’T

Don’t place cards inside of another card. Review our rules on elevation and for separation within cards, use dividiers or a small banner to call content out separately.

Accessibility

Keyboard support

You can tab into an actionable card and then into its content.
You can tab into the dismiss in the card (last).

Labels

The developer should set dismissLabel to provide a translated aria-label for the dismiss “X” button.