Components menu
  2. components
  3. structure
  4. card

Card

Cards are used to group similar concepts and tasks together to make Shopify easier for merchants to scan, read, and get things done.

Examples

Use when you have a simple message to communicate to merchants that doesn’t require any secondary steps.

Drag to resize example

Props

actions
DisableableAction[]
Card header actions
children
React.ReactNode
Inner content of the card
primaryFooterAction
ComplexAction
Primary action in the card footer
secondaryFooterActions
ComplexAction[]
Secondary actions in the card footer
secondaryFooterActionsDisclosureText
string
The content of the disclosure button rendered when there is more than one secondary footer action
sectioned
boolean
Auto wrap content in section
subdued
boolean
A less prominent card
title
React.ReactNode
Title content for the card

Accessibility

The required title prop gives the card a level 2 heading (<h2>). This helps with readability and provides structure to screen reader users.

If you use the subdued prop on a card or section, make sure that the card or section title conveys the reason for using subdued. This ensures that merchants with low vision, including those who use screen readers, can identify that the content is inactive or less important.

Do

<Card title="Deactivated staff accounts" sectioned subdued>
  <List>
    <List.Item>Felix Crafford</List.Item>
    <List.Item>Ezequiel Manno</List.Item>
  </List>
</Card>

Don’t

<Card title="Staff accounts" sectioned subdued>
  <List>
    <List.Item>Felix Crafford</List.Item>
    <List.Item>Ezequiel Manno</List.Item>
  </List>
</Card>

Default card

Use when you have a simple message to communicate to merchants that doesn’t require any secondary steps.

Default card with a title and a short body

Card with header actions

Use for less important card actions, or actions merchants may do before reviewing the contents of the card.

  • Use an icon for the action, if possible
  • Include no more than 2 actions

Card with a title (Conditions), a short body and a header action to add a condition

Card with footer actions

Use footer actions for a card’s most important actions, or actions merchants should do after reviewing the contents of the card.

  • Use buttons with labels
  • If you have more than 2 actions, consider using an overflow menu on the card

Card featuring footer actions: add variant, edit options

Card with multiple sections

Use when you have two related but distinct pieces of information to communicate to merchants. Multiple sections can help break up complicated concepts to make them easier to scan and understand.

Shipping costs card with multiple sections: domestic, international

Card section with destructive action

Customer card with multiple titled sections: note, shipping address

Accessibility

See Material Design and development documentation about accessibility for Android:

Default card

Use when you have a simple message to communicate to merchants that doesn’t require any secondary steps.

Default card with a title and a short body

Card with header actions

Use for less important card actions, or actions merchants may do before reviewing the contents of the card.

  • Use an icon for the action, if possible
  • Include no more than 2 actions

Card with a title (Conditions), a short body and a header action to add a condition

Card with footer actions

Use footer actions for a card’s most important actions, or actions merchants should do after reviewing the contents of the card.

  • Use buttons with labels
  • If you have more than 2 actions, consider using an overflow menu on the card

Card featuring footer actions: add variant, edit options

Card with multiple sections

Use when you have two related but distinct pieces of information to communicate to merchants. Multiple sections can help break up complicated concepts to make them easier to scan and understand.

Shipping costs card with multiple sections: domestic, international

Card section with destructive action

Customer card with multiple titled sections: note, shipping address

Accessibility

See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:

Best practices

Cards should:

  • Use headings that set clear expectations about the card’s purpose
  • Prioritize information so the content merchants most need to know comes first
  • 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 an Edit link)

Content guidelines

Heading

Headings should be:

  • Descriptive: Help merchants understand what they’ll find in the card
  • Concise and scannable:
    • Use simple, clear language that can be read at a glance
    • Keep headings to single sentence and avoid using punctuation such as periods, commas, or semicolons
    • Where possible, avoid articles (the, a, an) to keep content short and actionable
    • Written in sentence case
    • Informative: They should label the type of content grouped in the body content below

  • Online store dashboard

  • This is your online store dashboard

Body content

Body content should be:

  • Actionable: start sentences with imperative verbs when telling merchants what actions are available to them (especially something new). Don’t use permissive language like “you can”.

  • Get performance for all your sales channels.

  • Now you can get performance data for all your sales channels.

  • Structured for merchant success: always put the most critical information first.
  • Clear: use the verb “need” to help merchants understand when they’re required to do something.

  • To buy a shipping label, you need to enter the total weight of your shipment, including packaging.

  • To buy a shipping label, you must enter the total weight of your shipment, including packaging.

Call-to-action button

Buttons should be:

  • Clear and predictable: merchants should be able to anticipate what will happen when they click a button. Never deceive merchants by mislabeling a button.

  • Create order

  • Buy shipping label

  • New order

  • Buy

Action-led: buttons should always lead with a strong verb that encourages action. To provide enough context to merchants use the {verb}+{noun} format on buttons except in the case of common actions like Save, Close, Cancel, or OK.

  • Activate Apple Pay

  • View shipping settings

  • Try Apple Pay

  • View your settings

Scannable: Avoid unnecessary words and articles such as the, an, or a.

  • Add menu item

  • Add a menu item

Section titles

Section titles should be:

  • Informative: they should label the type of content grouped in the body content below
  • Like headings: follow the same content guidelines as when you’re writing headings

Action links

Links should be:

  • Used for secondary or persistent actions: links should be used to represent lower priority actions than buttons, or persistent actions that merchants may take at any time (such as a persistent Edit link).
  • Clearly labeled: merchants should not need to guess where they’ll end up if they click on an action link. Never use “click here” as a link because it doesn’t set expectations about what’s next.
  • Similar to buttons: Follow the same content guidelines as when you’re writing text for buttons.

View source in GitHub · Preview examples in ChromaUI