Examples
Use when you have a simple message to communicate to merchants that doesn’t require any secondary steps.
Cards are used to group similar concepts and tasks together to make Shopify easier for merchants to scan, read, and get things done.
Use when you have a simple message to communicate to merchants that doesn’t require any secondary steps.
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.
<Card title="Deactivated staff accounts" sectioned subdued>
<List>
<List.Item>Felix Crafford</List.Item>
<List.Item>Ezequiel Manno</List.Item>
</List>
</Card>
<Card title="Staff accounts" sectioned subdued>
<List>
<List.Item>Felix Crafford</List.Item>
<List.Item>Ezequiel Manno</List.Item>
</List>
</Card>
Use when you have a simple message to communicate to merchants that doesn’t require any secondary steps.
Use for less important card actions, or actions merchants may do before reviewing the contents of the card.
Use footer actions for a card’s most important actions, or actions merchants should do after reviewing the contents of the card.
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.
See Material Design and development documentation about accessibility for Android:
Use when you have a simple message to communicate to merchants that doesn’t require any secondary steps.
Use for less important card actions, or actions merchants may do before reviewing the contents of the card.
Use footer actions for a card’s most important actions, or actions merchants should do after reviewing the contents of the card.
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.
See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:
Cards should:
Card titles should follow the content guidelines for headings and subheadings.
Body content should be:
Get performance for all your sales channels.
Now you can get performance data for all your sales channels.
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.
Buttons should be:
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 should be:
Links should be: