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 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: Elements to display inside card.
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