Alpha 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 and its documentation is in development. There could be breaking changes made to it in a non-major release of Polaris. Please use with caution.

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

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

Props

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

interface AlphaCardProps
children?React.ReactNode
background?"surface" | "surface-subdued"

Background color.

Defaults to 'surface'.

padding?"0" | "025" | "05" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "28" | "32"

The spacing around the card.

Defaults to '5'.

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