⚠️This version of Waffles Design System is no longer maintained, and was deprecated at the end of 2022. It's main repository is archived. Please migrate your app to the New Waffles.

components

Card

Card is used to group similar concepts and tasks together.

Overview

A Card can be used to display content in its own section.

import Card from '@datacamp/waffles-card';
import { Heading, Paragraph } from '@datacamp/waffles-text';

function Playground(): JSX.Element {
  return (
    <Card elevation={0}>
      <div style={{ padding: 24 }}>
        <Heading as="h4" size={400}>
          A Card
        </Heading>
        <Paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et felis
          at ex hendrerit euismod. Aenean ut eros nisl. Etiam maximus augue ut
          velit fermentum, id aliquam elit tempor. Aenean commodo, urna et posuere
          auctor, neque justo scelerisque quam, quis ullamcorper ex ligula sed
          odio. Suspendisse at eros ante.
        </Paragraph>
      </div>
    </Card>
  );
}

import Card from '@datacamp/waffles-card';
import { Heading, Paragraph } from '@datacamp/waffles-text';

function Playground(): JSX.Element {
  return (
    <Card elevation={0}>
      <div style={{ padding: 24 }}>
        <Heading as="h4" size={400}>
          A Card
        </Heading>
        <Paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et felis
          at ex hendrerit euismod. Aenean ut eros nisl. Etiam maximus augue ut
          velit fermentum, id aliquam elit tempor. Aenean commodo, urna et posuere
          auctor, neque justo scelerisque quam, quis ullamcorper ex ligula sed
          odio. Suspendisse at eros ante.
        </Paragraph>
      </div>
    </Card>
  );
}

Live

Examples

With a mouse over elevation

A Card with Mouse Over Elevation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et felis at ex hendrerit euismod. Aenean ut eros nisl. Etiam maximus augue ut velit fermentum, id aliquam elit tempor.

With a head stone

A Card with a Head Stone

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et felis at ex hendrerit euismod. Aenean ut eros nisl. Etiam maximus augue ut velit fermentum, id aliquam elit tempor.

Props

Card

Name	Value	Default	Description
hoverElevation	custom		The border/shadow to use when the Card is hovered. Accepts the same values as elevation, and must also be greater than the elevation level provided.
as	'div' \| 'section' \| 'aside'	'div'	The html element to render.
children	ReactReactNode	Required	The content of the card.
className	string		A css className. This can be used to add custom styling.
dataAttributes	object		Can be used to set data- html attributes on the element.
elevation	0 \| 1 \| 2 \| 3 \| 4	0	The border/shadow to use on the Card. 0 corresponds to a border, and the other values correspond to levels of shadow.
headStone	ReactReactNode		Content to render sticking out the top of the card. This will be positioned sticking out the top of the card and can be used for technology icons etc. Note this adds a position and margin-top to the card style in order to position the head stone content correctly.
id	string		—
onClick	function		The optional callback fired when the card is clicked.

Imports

You can import following components or utilities from this module:

import Card, { elevationMap } from '@datacamp/waffles-card';