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.

Alpha

This component is a work in progress and ready for exploratory usage, with breaking changes expected in minor version updates. Please use with caution. Learn more about our component lifecycles.

By default, cards have an 8px border radius and uses --p-color-bg as the background and --p-shadow-md as the shadow. There is padding of space-5 (20px) around children and space-4 (16px) for small screens.

import {Card, Text} from '@shopify/polaris';
import React from 'react';

function CardExample() {
  return (
    <Card>
      <Text as="h2" variant="bodyMd">
        Content inside a card
      </Text>
    </Card>
  );
}

Props

Want to help make this feature better? Please share your feedback.

interface CardProps
children?React.ReactNode
background?ColorBackgroundAlias

Background color.

Defaults to 'bg'.

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.

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