Card

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

Overview

Resources

Install


yarn add @activecampaign/camp-components-card

Variations

Default card

Use the default card in most cases when looking to group related content together. Card is a container, and this is an example of the card component with additional elements inside of it.

Example Card

Any content can be place into a card. This one has an example toggle.


import Card from '@activecampaign/camp-components-card';
import Flex from '@activecampaign/camp-components-flex';
import Text from '@activecampaign/camp-components-text';
import Checkbox from '@activecampaign/camp-components-checkbox';
 
<Card p="sp500">
  <Flex alignItems="center">
    <Flex.Item grow="1" mr="sp800">
      <Text as="h2" family="ffStandard" height="lh200" mb="sp200" size="fs200">
        Example Card
      </Text>
      <Text color="slate600" family="ffStandard" height="lh200" size="fs200">
        Any content can be place into a card. This one has an example toggle.
      </Text>
    </Flex.Item>
    <Checkbox appearance="toggle" />
  </Flex>
</Card>;

Actionable card

When enabled, actionable cards provide visual states when interacted with on hover, active, or focus. Actionable cards should not have buttons or other actions inside of them.


// include any styles that should apply to an unselected card
const defaultCardStyle = {
  border: 'b100 bSolid slate200',
};
 
// include any styles that should apply to an selected card
const selectedCardStyle = {
  borderColor: 'ocean500',
  boxShadow: 'shadow200',
}
 
export const MyCards = () => {
  const [cardOneStyle, setCardOneStyle] = useState(defaultCardStyle);
  const [cardTwoStyle, setCardTwoStyle] = useState(defaultCardStyle);
  const [selectedCard, setSelectedCard] = useState();
 
  return (
    <Card
      p="sp500"
      actionable
      onClick={() => {
        setSelectedCard(1)
        setCardOneStyle(selectedCardStyle)
        setCardTwoStyle(defaultCardSTyle)
      }}
      dangerouslySetStyles={cardOneStyle}
    >
      Card 1 content here
    </Card>
 
    <Card
      p="sp500"
      actionable
      onClick={() => {
        setSelectedCard(2)
        setCardOneStyle(defaultCardStyle)
        setCardTwoStyle(defaultCardSTyle)
      }}
      dangerouslySetStyles={cardOneStyle}
    >
      Card 2 content here
    </Card>
  )
}

Secondary card

Secondary cards are most often used for apps and integrations, where the card and its content are small and often aligned with many repeating cards in rows or columns. Secondary cards should always be actionable as these cards often lack the extra space to fit in a button.

Example Secondary Card

If it is an actionable and/or secondary card, it should not contain nested actionable items.


import Card from '@activecampaign/camp-components-card';
import Flex from '@activecampaign/camp-components-flex';
import Text from '@activecampaign/camp-components-text';
 
<Card p="sp500" secondary>
  <Flex alignItems="center">
    <Flex.Item grow="1" mr="sp800">
      <Text as="h2" family="ffStandard" height="lh200" mb="sp200" size="fs200">
        Example Secondary Card
      </Text>
      <Text color="slate600" family="ffStandard" height="lh200" size="fs200">
        If it is an actionable and/or secondary card, it should not contain nested actionable items.
      </Text>
    </Flex.Item>
  </Flex>
</Card>;

Usage

Card header and body

Card can be used with its subcomponents ContentHeader and ScrollableBody.


<Card>
  <Card.ContentHeader title="Card Title" icon={<Automation />}>
    ...content (rendered at the end of the header)
  </Card.ContentHeader>
  <Card.ContentScrollable>...content</Card.ContentScrollable>
</Card>

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.