Skip to contentShopify logoPolaris

Card

Cards are used to group similar concepts and tasks together for merchants to scan, read, and get things done. It displays content in a familiar and recognizable style.

Card component examples

Use to indicate when one of the sections in your card contains inactive or disabled content.

import React from 'react';
import {Bleed, BlockStack, Box, Card, List, Text} from '@shopify/polaris';

function CardWithSubduedSection() {
  return (
    <Card roundedAbove="sm">
      <BlockStack gap="200">
        <Text as="h2" variant="headingSm">
          Staff accounts
        </Text>
        <Box paddingBlockEnd="200">
          <List>
            <List.Item>Felix Crafford</List.Item>
            <List.Item>Ezequiel Manno</List.Item>
          </List>
        </Box>
      </BlockStack>
      <Bleed marginBlockEnd="400" marginInline="400">
        <Box background="bg-surface-secondary" padding="400">
          <BlockStack gap="200">
            <Text as="h3" variant="headingSm" fontWeight="medium">
              Deactivated staff accounts
            </Text>
            <List>
              <List.Item>Felix Crafford</List.Item>
              <List.Item>Ezequiel Manno</List.Item>
            </List>
          </BlockStack>
        </Box>
      </Bleed>
    </Card>
  );
}

Props

interface CardProps
children?React.ReactNode
background?ColorBackgroundAlias

Background color.

Defaults to 'bg-surface'.

padding?T | ({ [Breakpoint in BreakpointsAlias]?: T; })<T><SpaceScale>

The spacing around the card.

Defaults to {xs: '400', sm: '500'}.

roundedAbove?"xs" | "sm" | "md" | "lg" | "xl"

Border radius value above a set breakpoint.

Defaults to 'sm'.

Best practices

Cards should:

  • Group related information
  • Display information in a way that prioritizes what the merchant needs to know most first
  • Use headings that set clear expectations about the card’s purpose
  • Stick to single user flows or break more complicated flows into multiple sections
  • Avoid too many call-to-action buttons or links and only one primary call to action per card
  • Use calls to action on the bottom of the card for next steps and use the space in the upper right corner of the card for persistent, optional actions (such as Edit)

Related components