components

Card

Group content and actions about a single subject together to make it easier to scan and read.

Usage guidance

Card is a powerful tool to present content clearly, group related & actionable content, and to indicate hierarchy. A clear hierarchy of elements such as text, buttons, and images should be preserved. It can also serve as an entry point into deeper levels of detail or navigation. Use them to enhance navigation, content discovery, and engagement. A Card makes it easier for users to scan for relevant information, but avoid overloading them with content.

Multiple Cards can be displayed together in a grid or a vertical list, and separated by tokens.spacing.medium gutter.

To make a Card stand out more or to emphasize its purpose, provide Card.HeadstoneItem (single or multiple) via the headstone prop. It can contain either Icons or Assets.

In rare occasions, when the Card is used to group content without any actions, the hover drop shadow effect can be disabled with the disableHoverEffect prop.

It's possible to make the whole Card act as an action item—use as="a" (or any other link from the routing library of choice).

Card is available in two different sizes: medium and large. In most cases, the default value should be used. When using size="large" you must also set the size for the non-namespaced child components, such as Paragraph.

Content

The Card container itself is the only required element. Every other element is optional. It holds all Card elements, and the size is determined by the space occupied by its content.

Namespaced components, such as Card.Header, Card.Body and Card.Button, can be used to automatically handle the sizing configuration of the content. Otherwise custom content can be provided and configured explicitly, such as:

For Card headline in general use Heading of the default xlarge size.
For supporting text body use Paragraph.
For a call to action use Button, and follow the best practices.

Best practices

Examples

Basic usage

Intermediate Python

Level up your data science skills by creating visualizations using Matplotlib and manipulating DataFrames with pandas.

With headstone

Introduction to DataCamp projects

Use Python, SQL or R to build a project that has a specific solution, with guided tasks and real-time automated code checks.

Sizes

Intermediate Python

Level up your data science skills by creating visualizations using Matplotlib and manipulating DataFrames with pandas.

Intermediate Python

Level up your data science skills by creating visualizations using Matplotlib and manipulating DataFrames with pandas.

Variants

Regular variant

Level up your data science skills by creating visualizations using Matplotlib and manipulating DataFrames with pandas.

Highlight variant

With left aligned decor.

Highlight variant

With right aligned decor.

Highlight variants

Intermediate Python

Level up your data science skills.

Intermediate Python

Level up your data science skills.

Intermediate Python

Level up your data science skills.

Intermediate Python

Level up your data science skills.

Intermediate Python

Level up your data science skills.

Intermediate Python

Level up your data science skills.

Intermediate Python

Level up your data science skills.

Intermediate Python

Level up your data science skills.

Intermediate Python

Level up your data science skills.

Dark background-only highlight variants

Intermediate Python

Level up your data science skills.

Intermediate Python

Level up your data science skills.

Intermediate Python

Level up your data science skills.

With disabled hover

Card with hover effect disabled

It is possible to disable on hover drop shadow visual indicator for the very basic cards.

As a Link

Card as a Link

Focus will be handled properly in rare cases when Card is used as a or any other active element.

Playground

import { tokens } from '@datacamp/waffles/tokens';
import { Card } from '@datacamp/waffles/card';
import { Avatar } from '@datacamp/waffles/avatar';

function Playground() {
  // Using style, because emotion css prop doesn't work in Playground

  return (
    <Card>
      <Card.Header>Card title</Card.Header>
      <Card.Body style={{ marginBottom: 0 }}>
        Custom content of the card.
      </Card.Body>
    </Card>
  );
}

import { tokens } from '@datacamp/waffles/tokens';
import { Card } from '@datacamp/waffles/card';
import { Avatar } from '@datacamp/waffles/avatar';

function Playground() {
  // Using style, because emotion css prop doesn't work in Playground

  return (
    <Card>
      <Card.Header>Card title</Card.Header>
      <Card.Body style={{ marginBottom: 0 }}>
        Custom content of the card.
      </Card.Body>
    </Card>
  );
}

Live

Props

Card

Name	Type	Description
`as`	`React.ElementType`	The element used to render this component, e.g. `a` or react router `Link`.
`children`Required	`React.ReactNode`	The content of the Card. Can include any of Card's own subcomponents: `Card.Header`, `Card.Body`, `Card.Footer` and `Card.Button` or or custom content.
`disableHoverEffect`	`boolean`	Disables shadow effect on hover. Default: `false`
`headstone`	`React.ReactNode`	Content positioned along the top of the Card. Could be `Card.HeadstoneItem` or a custom component.
`highlightPlacement`	`leftright`	Determines the placement of the Card highlight. Only applicable when `variant` is set to `highlight`. Default: `left`
`highlightVariant`	`bluegreengreyLightgreyMediumnavyorangeorangeLightpinkpurplepurpleLightredtransparentGreywhiteyellow`	Determines the variant of the Card, based on the set of predefined background colors. Only applicable when `variant` is set to `highlight`. Default: `green`
`inverted`	`boolean`	Sets the style of the Card suitable for dark backgrounds. Default: `false` DEPRECATED Will be removed in `v6` - use Waffles' Theming instead.
`size`	`largemedium`	Defines the size of the Card. In most cases, the default size should be used. Default: `medium`
`variant`	`highlightregular`	Whether the card should show a highlight decoration to the side. Default: `regular`

Card.Body

In addition to the props listed below, Card.Body accepts all props from React.HTMLAttributes<HTMLSpanElement>.

Name	Type	Description
`children`Required	`React.ReactNode`	Card main content or description.

Card.Button

Card.Button accepts all props from Waffles Button.

In addition to the props listed below, Card.Footer accepts all props from React.HTMLAttributes<HTMLElement>.

Name	Type	Description
`children`Required	`React.ReactNode`	Content of the footer. In most cases, should be one or multiple `Card.Button` subcomponents.

Card.Header accepts all props from Waffles Heading, except: inverted.

Card.HeadstoneAvatar

In addition to the props listed below, Card.HeadstoneAvatar accepts all props from React.HTMLAttributes<HTMLDivElement>, except: content.

Name	Type	Description
`content`Required	`JSX.Elementstring`	Content of the item. In general, pass Waffles Logomark Asset or a string containing only one character.

Imports

You can import the following components, utilities or types from this module:

import { Card } from '@datacamp/waffles/card';
import type {
  CardProps,
  HeadstoneAvatarProps,
  HeaderProps,
  BodyProps,
  FooterProps,
  ButtonProps,
} from '@datacamp/waffles/card';