Card usage guidelines

Cards are structured containers that group related content and actions together, making information easily digestible and actionable.

When to use

• To display a collection of related items such as products.
• To organize content into distinct and scannable units on a page.
• To group a mix of elements including text, media, and actions in a consistent and structured way.

When not to use

• For simple lists of items that don’t have multiple content types or elements to display.
• As a form of primary navigation. For this use link tabs or other navigation solutions instead.

Usage

Preview

Card title

Card subtitle (optional)

Alice's Adventures in Wonderland (also known as Alice in Wonderland) is an 1865 English children's novel by Lewis Carroll.

Click me

Code

import { Button, Card, CardContent, CardHeader, Divider, Text } from '@cimpress-ui/react';
import { IconPlaceholder } from '@cimpress-ui/react/icons';
import img from './image.png';

export default function Demo() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '320px' }}>
      <Card>
        <CardContent fullBleed>
          <img src={img.src} alt="" style={{ display: 'block', width: '100%', objectFit: 'contain' }} />
        </CardContent>

        <CardHeader title="Card title" description="Card subtitle (optional)" iconStart={<IconPlaceholder />} />

        <Divider />

        <CardContent>
          <Text as="p" variant="medium">
            Alice's Adventures in Wonderland (also known as Alice in Wonderland) is an 1865 English children's novel by
            Lewis Carroll.
          </Text>
        </CardContent>

        <Divider />

        <CardContent>
          <Button variant="primary">Click me</Button>
        </CardContent>
      </Card>
    </div>
  );
}

The card component functions as a stack with multiple slots for elements to be placed into. This allows cards to be completely customizable for any use case. Cimpress UI provides several pre-built card elements to encourage consistency and efficiency. When possible these elements should be used in the card component, but custom elements can also be added when needed. Any custom elements must follow Cimpress UI design standards.

Examples

Preview

Cost-based Q3

Last updated: May 3, 2023

Active

View configuration

Code

import { Badge, Button, Card, CardContent, CardHeader, Text } from '@cimpress-ui/react';
import { IconArrowRight } from '@cimpress-ui/react/icons';

const DATE = new Date(2023, 4, 3);

export default function Demo() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '320px' }}>
      <Card>
        <CardHeader
          title="Cost-based Q3"
          description={
            <Text as="span" fontStyle="italic">
              Last updated: {DATE.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
            </Text>
          }
          tools={<Badge tone="success">Active</Badge>}
        />

        <CardContent>
          <Button iconEnd={<IconArrowRight />}>View configuration</Button>
        </CardContent>
      </Card>
    </div>
  );
}

Preview

568 adoptions

CIM_TSHIRT

Cimpress Standard T-Shirt

Long and Short Sleeve T-Shirts

Supplier: Vistaprint

Category: T-Shirts

Code

import { Badge, Card, CardContent, CardHeader, Divider, Link, Stack, Text } from '@cimpress-ui/react';
import img from './image.png';

export default function Demo() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '320px' }}>
      <Card>
        <CardContent>
          <Stack align="end" gap={0}>
            <Badge tone="info">568 adoptions</Badge>
          </Stack>
        </CardContent>

        <CardContent fullBleed>
          <img src={img.src} alt="" style={{ display: 'block', width: '100%', objectFit: 'contain' }} />
        </CardContent>

        <CardHeader title={<Link href="#">CIM_TSHIRT</Link>} description="Cimpress Standard T-Shirt" />

        <Divider />

        <CardContent>
          <Stack gap={8}>
            <Text as="p" variant="medium-semibold">
              <Link href="#">Long and Short Sleeve T-Shirts</Link>
            </Text>
            <Text as="p" variant="medium">
              <Text as="strong" variant="medium-semibold">
                Supplier:
              </Text>{' '}
              <Link href="#">Vistaprint</Link>
            </Text>
            <Text as="p" variant="medium">
              <Text as="strong" variant="medium-semibold">
                Category:
              </Text>{' '}
              <Link href="#">T-Shirts</Link>
            </Text>
          </Stack>
        </CardContent>
      </Card>
    </div>
  );
}

Formatting and layout

Placement

Cards can be used individually or in collections. When the number of cards is variable, like if the list is depending on user filtering for example, the cards should wrap so that the list is always visually consistent.

Spacing

• Cards in a list should have 24px of horizontal and vertical spacing between them.

Content writing

Title

Keep titles concise and descriptive, accurately reflecting the card’s content. In groups of cards, the titles should be consistent in their contents, and should make it easy for users to distinguish between cards.

Additional text

Write clear and concise body text. For longer descriptions, consider truncating the text and providing a “Read more” link.

Icon buttons

Any icon buttons used in cards should be used for standard actions that are obvious to users. If it’s not clear to users what an icon means, use a text button or a different action instead.

Button labels

Use clear and actionable labels for buttons. Refer to the button documentation for specific guidelines.

Behaviors

Text wrapping

When possible, text content within cards should wrap naturally to prevent overflow and maintain readability.