Media card

Media cards provide a consistent layout to present visual information to merchants. Visual media is used to provide additional context to the written information it's paired with.

Examples

Use to surface educational information about a feature or opportunity.

---

Best practices

Media cards should:

• Provide merchants with a clear call to action.
• Always pair text with a visual component, for example, body text paired with an image, video, etc.
• Use media to enhance the written content. The written content should be able to stand alone without an explanation from the paired media.
• Show targeted content toward specific audiences to maximize relevance.
• Be dismissable.

---

Content guidelines

• Don’t use media cards as advertisements for your feature. Instead they should educate the merchant about how to accomplish tasks related to the section they’re in.

Title

Media 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 create a video card, use the video thumbnail component
• 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

See Material Design and development documentation about accessibility for Android:

• Accessible design on Android
• Accessible development on Android

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

• Accessible design on iOS
• Accessible development on iOS

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

Use actionable language to ensure that the purpose of the media card is clear to all merchants, including those with issues related to reading and language.