Waffles
© 2021 DataCamp, Inc.

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.

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

Python

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

NameValueDefaultDescription
hoverElevationcustomThe 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.
childrenReactReactNodeRequiredThe content of the card.
classNamestringA css className. This can be used to add custom styling.
elevation0 | 1 | 2 | 3 | 40The border/shadow to use on the Card. 0 corresponds to a border, and the other values correspond to levels of shadow.
headStoneReactReactNodeContent 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.
idstring
onClickfunctionThe 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';