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 Ref<HTMLDivElement>: The ref type for this component.

CardProps

children * ReactNode: The contents of the card.
id string: The element's unique identifier. See MDN.
data-cim-style-root boolean: Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
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 CSSProperties: Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

StyleProps

margin Responsive<Spacing | "auto">: The amount of margin applied to all edges of this component.
marginX Responsive<Spacing | "auto">: The amount of margin applied to the left and right edges of this component. Takes priority over margin.
marginY Responsive<Spacing | "auto">: The amount of margin applied to the top and bottom edges of this component. Takes priority over margin.
marginTop Responsive<Spacing | "auto">: The amount of margin applied to the top edge of this component. Takes priority over marginY and margin.
marginRight Responsive<Spacing | "auto">: The amount of margin applied to the right edge of this component. Takes priority over marginX and margin.
marginBottom Responsive<Spacing | "auto">: The amount of margin applied to the bottom edge of this component. Takes priority over marginY and margin.
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 * 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 ReactNode

The icon to display at the start of the header.

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 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 string

The element's unique identifier. See MDN.

data-cim-style-root boolean

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

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 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 * ReactNode: The content of this block.
fullBleed boolean: Whether the block's content should stretch to the edges of the block.

Defaults to false .
id string: The element's unique identifier. See MDN.
data-cim-style-root boolean: Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
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 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 Ref<HTMLDivElement>: The ref type for this component.

DividerProps

orientation 'vertical' | 'horizontal': The orientation of the divider (horizontal or vertical).

Defaults to 'horizontal' .
id string: The element's unique identifier. See MDN.
data-cim-style-root boolean: Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
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 CSSProperties: Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

StyleProps

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