Card

Card is an empty container with basic styling applied, perfect for composing components.

<Card>
  <View height={10} backgroundColor="neutral-faded" />
</Card>

Cards can be used as actionable elements, supporting both href and onClick properties. They automatically use the correct HTML tag for the Card root element to ensure accessibility for screen readers.

<Card onClick={() => {}}>
  <View height={10} backgroundColor="neutral-faded" />
</Card>

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

function Component() {
  const selected = useToggle(true);

  return (
    <Card as="label" selected={selected.active}>
      <View gap={3} direction="row" align="center">
        <Checkbox
          value="dog"
          checked={selected.active}
          onChange={({ checked }) =>
            checked ? selected.activate() : selected.deactivate()
          }
          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>
  );

Increase the elevation of the card with the elevated property

<Card elevated>
  <View height={10} backgroundColor="neutral-faded" />
</Card>

Card has a default x4 padding, which can be changed to any other multiplier of the base unit token.

<Card padding={2}>
  <View height={10} backgroundColor="neutral-faded" />
</Card>

You can also remove the padding from the Card entirely, allowing the content to take up its full width.

After removing the padding, you can use the View utility to reapply padding to specific parts of the content. This is handy when combining media elements with text content.

Located in a quiet street in hip and happening Amsterdam East near the Beukenplein and Oosterpark.

<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 them 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>

You can save space in smaller areas by making the Card full width with the bleed property. This property removes side borders and applies negative margins using a unit design token multiplier.

<Card bleed={4}>
  <View height={10} backgroundColor="neutral-faded" />
</Card>

You can control the height of the Card with the height property. It supports both unit token number values and string literal values.

In the following example we're setting up the height using the x40 multiplier and the same can be achieved by passing the 160px value.

<Card height={40} />

Card supports responsive syntax for the bleed and height properties. Use object syntax to control their value based on the viewport size. Responsive properties are mobile-first, so selecting a value for a viewport will also apply it to all wider viewports.

For example, this Card uses x4 bleed on small and medium screens but renders normally on large and extra-large screens.

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