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}>Hello World!</Card>

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

Props

$selected

boolean

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

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

$theme

Setting $theme will render the Card component with a trim along it's bottom edge.

$theme takes the name of any predefined gradient.

<Card $theme="sky" $padding={4}>Hello World!</Card>

<Card $theme="sky" $padding={4}>Hello World!</Card>

disabled and readOnly

<Box>
  <Card disabled $padding={4} $marginBottom={4}>Hello World!</Card>
  <Card readOnly $padding={4} $marginBottom={4}>Hello World!</Card>
  <Card disabled $theme="sky" $padding={4} $marginBottom={4}>Hello World!</Card>
</Box>

<Box>
  <Card disabled $padding={4} $marginBottom={4}>Hello World!</Card>
  <Card readOnly $padding={4} $marginBottom={4}>Hello World!</Card>
  <Card disabled $theme="sky" $padding={4} $marginBottom={4}>Hello World!</Card>
</Box>

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}>Card as a button</Card>
  <Card as="a" href="#" $padding={4}>Card as a link</Card>
</>

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

System Modifiers

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