---
title: "Card — React"
canonical: https://sky-ui.cf.sky.com/components/card/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Card — React

A Card is a flexible-sized container.

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

---

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

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

---

## Props

### $selected

`boolean`

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

### $error

`boolean`

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

---

### disabled and readOnly

```tsx
<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.

**Note:** 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.

```tsx
<>
  <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:

- [display](/core/system/display/)
- [flex-child](/core/system/flex-child/)
- [grid-child](/core/system/grid-child/)
- [height](/core/system/height/)
- [margin](/core/system/margin/)
- [padding](/core/system/padding/)
- [width](/core/system/width/)