Callout card

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

Heading

Headings should be:

• Descriptive: help merchants understand what they’ll find in the callout card
• Concise and scannable:
• Use simple, clear language that can be read at a glance
• Keep headings to a single sentence and avoid using punctuation such as periods, commas, or semicolons
• Sentence case (first word capitalized, the rest lowercase)

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.

• 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