Card

<View width="400px" maxWidth="100%">
  <Card>
    <View backgroundColor="neutral-faded" height={10} />
  </Card>
</View>

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

<Card>
  <View height={10} backgroundColor="neutral-faded" />
</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={() => {}}>
  <View height={10} backgroundColor="neutral-faded" />
</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-2" weight="medium">
            Dog
          </Text>
          <Text variant="body-3" color="neutral-faded">
            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}>
  <View height={10} backgroundColor="neutral-faded" />
</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}>
  <View height={10} backgroundColor="neutral-faded" />
</Card>

After the padding is removed, you can combine full-width content with the View 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}>
    <View aspectRatio={16 / 9}>
      <Image src="/img/examples/image-retina.webp" />
    </View>
    <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}>
    <View height={10} backgroundColor="neutral-faded" />
  </View>
  <Divider />
  <View padding={4}>
    <View height={10} backgroundColor="neutral-faded" />
  </View>
  <Divider />
  <View padding={4}>
    <View height={10} backgroundColor="neutral-faded" />
  </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}>
    <View height={10} backgroundColor="neutral-faded" />
  </Card>

  <Card bleed={{ s: 4, l: 0 }}>
    <View height={10} backgroundColor="neutral-faded" />
  </Card>
</View>

You can control the height of the Card with the height property. It support both, unit token number values and string literal values. Same as other layout properties, you can use responsive syntax for it.

In this example, we're setting its height to 100px on small viewports using unit token multiplier and to 160px on medium+ viewports:

<Card height={{ s: 25, m: 40 }} />