New image

LIBRARIES

Polaris Components FigMayo
👋 Getting started
📝 Changelog
🤝 Contribute

components

Account Connection
Action List
Avatar
Badge
Button
Button group
Callout card
Card
Checkbox
Choice list
Color picker
Contextual save bar
Data table
Date picker
Description list
Divider
Drop zone
Empty state
Exception list
Filters
Fullscreen bar
Footer help
Index filters
Index table
Inline error
Keyboard key
Link
Listbox
Media card
Modal
Navigation
Option list
Page
Page actions
Popover
Progress bar
Radio button
Range slider
Resource list
Select
Skeleton body text
Skeleton display text
Skeleton thumbnail
Spinner
Tabs
Tag
Text field
Thumbnail
Toast
Tooltip
Top bar
Video thumbnail
⚡️ Utilities
Polaris Styles FigMayo

core

Fills & Effects
Variables
Typography
Polaris Icons FigMayo

components

Icons
Navigation
Apps & channels
Ctrl-K
Polaris Components FigMayo/Media card
Updated 18 December 2024
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.

Badge
Component Preview

Properties

Media type

Change media type between static image or video.

Preview

Portrait

Changes layout from vertical to horizontal.

Preview

Secondary action

Add a button for a secondary action.

Preview

Tips

Swapping media

Click into the image to swap it for a custom image.

Preview
Mike Miller
Updated 18 Dec 2024
Media card(4 variants)
View Figma
    PlaygroundFigma
Figma notes
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. Polaris React:
Resources