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:
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
Playground
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: |
disableHoverEffect | boolean | Disables shadow effect on hover. Default:
|
headstone | React.ReactNode | Content positioned along the top of the Card. Could be |
highlightPlacement | left right | Determines the placement of the Card highlight. Only applicable when Default:
|
highlightVariant | blue green greyLight greyMedium navy orange orangeLight pink purple purpleLight red transparentGrey white yellow | Determines the variant of the Card, based on the set of predefined background colors. Only applicable when Default:
|
inverted | boolean | Sets the style of the Card suitable for dark backgrounds. Default:
DEPRECATED Will be removed in |
size | large medium | Defines the size of the Card. In most cases, the default size should be used. Default:
|
variant | highlight regular | Whether the card should show a highlight decoration to the side. Default:
|
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.
Card.Footer
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.Header
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.Element string | 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';