Polaris VueCallout card
Callout cards are used to encourage merchants to take an action related to a new feature or opportunity. They are most commonly displayed in the sales channels section of Shopify.
Props
Some types of props are following the Polaris Design Tokens.
No props found for this component, run `yarn gen:docs` to generate component meta first.
Slots
No slots found for this component, run `yarn gen:docs` to generate component meta first.
Events
Best practices
Callout cards should:
- Clearly articulate the benefit of the feature and what it does
- Provide merchants with a clear call to action
- Be targeted to merchants who will most benefit from the feature
- Be dismissable so merchants can get rid of cards about features they’re not interested in
- Use an illustration that helps to communicate the subject or merchant benefit
Content guidelines
Title
Callout card titles should follow the content guidelines for headings and subheadings.
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”.
- 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
Call to action
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.
- 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.
- Scannable: avoid unnecessary words and articles such as the, an, or a.
Related components
- To group similar concepts and tasks together, use the card component
- To create page-level layout, use the layout component
- To explain a feature that merchants haven’t tried yet, use the empty state component
Accessibility
The required title prop gives the callout card a level 2 heading (<h2>). This helps with readability and provides structure to screen reader users.
Illustrations included in callout cards are implemented as decorative images with empty alt attributes (alt="" ) so that they’re skipped by screen readers.
Use actionable language to ensure that the purpose of the callout card is clear to all merchants, including those with issues related to reading and language.