Card

<View width="400px" maxWidth="100%">
  <Card>
    <Placeholder />
  </Card>
</View>

Cards are empty containers with basic styling applied to them, and they are perfect for the composition of components.

<Card>
  <Placeholder />
</Card>

Cards are often used as actionable elements, so it supports both href and onClick properties. It will automatically use a correct HTML tag for the Card root element to keep it accessible for screen readers.

<Card onClick={() => {}}>
  <Placeholder />
</Card>

Card supports selected state when used for group selection. For example, it can be used with Checkbox or Radio to highlight their selected state.

function Example() {
  const [selected, setSelected] = React.useState(true);

  return (
    <Card as="label" selected={selected}>
      <View gap={3} direction="row" align="center">
        <Checkbox
          value="dog"
          checked={selected}
          onChange={({ checked }) => setSelected(checked)}
          name="animal"
        />
        <View.Item grow>
          <Text variant="body-strong-1">Dog</Text>
          <Text variant="body-2">
            The dog is a domesticated animal of the family Canidae.
          </Text>
        </View.Item>
      </View>
    </Card>
  );
}

Card has a default 4x padding, which you can change to any other multiplier of the base unit token.

<Card padding={2}>
  <Placeholder />
</Card>

In the same way, you can altogether remove the padding from the Card and let the content take its entire width. Compare it with the previous example to see the difference.

<Card padding={0}>
  <Placeholder />
</Card>

After the padding is removed, you can combine full-width content with the Frame utility to get the padding back for some parts of the content. That is handy when you're combining media elements with text content.

<View width="50%">
  <Card padding={0}>
    <AspectRatio ratio={16 / 9}>
      <Image src="/img/examples/image-retina.webp" />
    </AspectRatio>
    <View padding={4}>
      Located in a quiet street in hip and happening Amsterdam East near the
      Beukenplein and Oosterpark.
    </View>
  </Card>
</View>

You can compose multiple card sections together with the Divider component to make it look like a group of cards.

<Card padding={0}>
  <View padding={4}>
    <Placeholder />
  </View>
  <Divider />
  <View padding={4}>
    <Placeholder />
  </View>
  <Divider />
  <View padding={4}>
    <Placeholder />
  </View>
</Card>

There is an opportunity to save space on mobile viewports by making the Card full width. Card supports bleed property to avoid layout complexities that remove side borders and apply the negative margin multiplier you pass to it. Like most other layout properties, the bleed property is responsive, so you can easily control how your Card behaves on every viewport size.

For example, the second Card here uses x4 bleed on small and medium screens but renders normally for large and extra-large screens.

<View gap={3}>
  <Card bleed={4}>
    <Placeholder />
  </Card>

  <Card bleed={{ s: 4, l: 0 }}>
    <Placeholder />
  </Card>
</View>