Card - React

View on Figma View on GitHub

import { Card } from '@sky-uk/ui-core';

A container for content and/or actions. Also used as interaction control.

<Card $padding={4}><Text>Hello World!</Text></Card>

Props

$selected

boolean

<Card $selected $padding={4}><Text>Hello World!</Text></Card>

$error

boolean

<Card $error $padding={4}><Text>Hello World!</Text></Card>

disabled and readOnly

<Flex $gap={6} $flexWrap="wrap">
  <Card $padding={4} disabled $maxWidth="300px">
    <Flex $flexDirection="column" $gap={4}>
      <Tag label="Out of stock" $variant="negative" />
      <Image
        src="https://placehold.co/80x80"
        alt="Placeholder"
        $width="80px"
        $height="80px"
        $objectFit="contain"
      />
      <Text $fontSize="display-6" $fontWeight="bold">
        Custom content
      </Text>
      <Text>This is an example for a custom-made component</Text>
      <IconList>
        <IconList.Item>
          <Text>Icon list item</Text>
        </IconList.Item>
        <IconList.Item>
          <Text>Icon list item</Text>
        </IconList.Item>
      </IconList>
    </Flex>
  </Card>
  <Card $padding={4} readOnly $maxWidth="300px">
    <Flex $flexDirection="column" $gap={4}>
      <Tag label="Out of stock" $variant="negative" />
      <Image
        src="https://placehold.co/80x80"
        alt="Placeholder"
        $width="80px"
        $height="80px"
        $objectFit="contain"
      />
      <Text $fontSize="display-6" $fontWeight="bold">
        Custom content
      </Text>
      <Text>This is an example for a custom-made component</Text>
      <IconList>
        <IconList.Item>
          <Text>Icon list item</Text>
        </IconList.Item>
        <IconList.Item>
          <Text>Icon list item</Text>
        </IconList.Item>
      </IconList>
    </Flex>
  </Card>
</Flex>

Interaction

The Card component gains interactive cues with hover and focus effects when onClick or href are set.

Interactive Card components (e.g. as='a' or as='button') should not be nested, as this would result in a compound transition of both Cards moving along, and would produce invalid HTML.

<>
  <Card as="button" onClick={() => console.log("hello!")} $padding={4}><Text>Card as a button</Text></Card>
  <Card as="a" href="#" $padding={4}><Text>Card as a link</Text></Card>
</>

System Modifiers

The Card component also supports the props applied using the following system modifiers: