Card API

Import

Cimpress UI exports several card-related components:

Card: container component that displays a card.
CardHeader: renders a card title with optional description, icon, and menu.
CardContent: renders a single content section within Card.
Divider: renders a line between card sections to visually separate them.

import { Card, CardContent, CardHeader, Divider } from '@cimpress-ui/react';

Accessibility notes

Card collections should be grouped in HTML lists.

Cards shouldn’t be miniature web pages. Avoid too much functionality, and reduce tab stops to a minimum to simplify keyboard navigation through the card list.

API reference

Card

Groups related blocks of content into a single unit.

See card usage guidelines.

ref Section titled “ ref ” Ref<HTMLDivElement>: The ref type for this component.

CardProps

children * Section titled “ children * ” ReactNode: The contents of the card.
id Section titled “ id ” string: The element's unique identifier. See MDN.
data-cim-style-root Section titled “ data-cim-style-root ” boolean: Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
UNSAFE_className Section titled “ UNSAFE_className ” string: Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.
UNSAFE_style Section titled “ UNSAFE_style ” CSSProperties: Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

StyleProps

margin Section titled “ margin ” Responsive<Spacing | "auto">: The amount of margin applied to all edges of this component.
marginX Section titled “ marginX ” Responsive<Spacing | "auto">: The amount of margin applied to the left and right edges of this component. Takes priority over margin.
marginY Section titled “ marginY ” Responsive<Spacing | "auto">: The amount of margin applied to the top and bottom edges of this component. Takes priority over margin.
marginTop Section titled “ marginTop ” Responsive<Spacing | "auto">: The amount of margin applied to the top edge of this component. Takes priority over marginY and margin.
marginRight Section titled “ marginRight ” Responsive<Spacing | "auto">: The amount of margin applied to the right edge of this component. Takes priority over marginX and margin.
marginBottom Section titled “ marginBottom ” Responsive<Spacing | "auto">: The amount of margin applied to the bottom edge of this component. Takes priority over marginY and margin.
marginLeft Section titled “ marginLeft ” Responsive<Spacing | "auto">: The amount of margin applied to the left edge of this component. Takes priority over marginX and margin.

CardHeader

Renders a header within a Card.

CardHeaderProps

title * Section titled “ title * ” ReactNode

The title of the card. Optionally, you can pass a React node to render a link.

Examples:

<CardHeader title="Card title" />
<CardHeader title={<Link href="#">Card title</Link>} />

iconStart Section titled “ iconStart ” ReactNode

The icon to display at the start of the header.

description Section titled “ description ” ReactNode

The description of the card. Optionally, you can pass a React node to render rich text.

Examples:

<CardHeader title="Card title" description="Card subtitle" />
<CardHeader title="Card title" description={<Link href="#">Card subtitle</Link>} />

tools Section titled “ tools ” ReactNode

The tools to render at the end of the header. Usually a menu, icon button, or badge. For buttons, use the "small" size variant.

Examples:

<CardHeader title="Card title" tools={<IconButton size="small" icon={<IconRatingStar />} aria-label="Favorite" />} />

id Section titled “ id ” string

The element's unique identifier. See MDN.

data-cim-style-root Section titled “ data-cim-style-root ” boolean

Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.

UNSAFE_className Section titled “ UNSAFE_className ” string

Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.

UNSAFE_style Section titled “ UNSAFE_style ” CSSProperties

Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

CardContent

Renders a single block of content within Card.

CardContentProps

children * Section titled “ children * ” ReactNode: The content of this block.
fullBleed Section titled “ fullBleed ” boolean: Whether the block's content should stretch to the edges of the block.

Defaults to false .
id Section titled “ id ” string: The element's unique identifier. See MDN.
data-cim-style-root Section titled “ data-cim-style-root ” boolean: Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
UNSAFE_className Section titled “ UNSAFE_className ” string: Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.
UNSAFE_style Section titled “ UNSAFE_style ” CSSProperties: Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

Divider

Renders a divider between adjacent content.

ref Section titled “ ref ” Ref<HTMLDivElement>: The ref type for this component.

DividerProps

orientation Section titled “ orientation ” 'vertical' | 'horizontal': The orientation of the divider (horizontal or vertical).

Defaults to 'horizontal' .
id Section titled “ id ” string: The element's unique identifier. See MDN.
data-cim-style-root Section titled “ data-cim-style-root ” boolean: Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
UNSAFE_className Section titled “ UNSAFE_className ” string: Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.
UNSAFE_style Section titled “ UNSAFE_style ” CSSProperties: Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

StyleProps

margin Section titled “ margin ” Responsive<Spacing | "auto">: The amount of margin applied to all edges of this component.
marginX Section titled “ marginX ” Responsive<Spacing | "auto">: The amount of margin applied to the left and right edges of this component. Takes priority over margin.
marginY Section titled “ marginY ” Responsive<Spacing | "auto">: The amount of margin applied to the top and bottom edges of this component. Takes priority over margin.
marginTop Section titled “ marginTop ” Responsive<Spacing | "auto">: The amount of margin applied to the top edge of this component. Takes priority over marginY and margin.
marginRight Section titled “ marginRight ” Responsive<Spacing | "auto">: The amount of margin applied to the right edge of this component. Takes priority over marginX and margin.
marginBottom Section titled “ marginBottom ” Responsive<Spacing | "auto">: The amount of margin applied to the bottom edge of this component. Takes priority over marginY and margin.
marginLeft Section titled “ marginLeft ” Responsive<Spacing | "auto">: The amount of margin applied to the left edge of this component. Takes priority over marginX and margin.

Card API

Import

Accessibility notes

API reference

Card

ref

children *

id

data-cim-style-root

UNSAFE_className

UNSAFE_style

margin

marginX

marginY

marginTop

marginRight

marginBottom

marginLeft

CardHeader

title *

iconStart

description

tools

id

data-cim-style-root

UNSAFE_className

UNSAFE_style

CardContent

children *

fullBleed

id

data-cim-style-root

UNSAFE_className

UNSAFE_style

Divider

ref

orientation

id

data-cim-style-root

UNSAFE_className

UNSAFE_style

margin

marginX

marginY

marginTop

marginRight

marginBottom

marginLeft