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.
| Used to | Examples |
|---|---|
| Educate merchants on key actions | Show how to connect a social account with a demo image |
| Provide clear calls to action | Show campaign preview with a "Send campaign" button |
Was this section helpful?
Media card
<s-box border="base" borderRadius="base" overflow="hidden" maxInlineSize="216px">
<s-clickable href="" accessibilityLabel="4-pieces puzzle template">
<s-image
aspectRatio="1/1"
objectFit="cover"
alt="Illustration of characters with a 4-piece puzzle"
src="https://cdn.shopify.com/static/images/polaris/patterns/4-pieces.png"
></s-image>
</s-clickable>
<s-divider></s-divider>
<s-grid
gridTemplateColumns="1fr auto"
background="base"
padding="small"
gap="small"
alignItems="center"
>
<s-heading>4-Pieces</s-heading>
<s-button href="" accessibilityLabel="View 4-pieces puzzle template">
View
</s-button>
</s-grid>
</s-box>
Examples
Media card
Default
<s-box border="base" borderRadius="base" overflow="hidden" maxInlineSize="216px"> <s-clickable href="" accessibilityLabel="4-pieces puzzle template"> <s-image aspectRatio="1/1" objectFit="cover" alt="Illustration of characters with a 4-piece puzzle" src="https://cdn.shopify.com/static/images/polaris/patterns/4-pieces.png" ></s-image> </s-clickable> <s-divider></s-divider> <s-grid gridTemplateColumns="1fr auto" background="base" padding="small" gap="small" alignItems="center" > <s-heading>4-Pieces</s-heading> <s-button href="" accessibilityLabel="View 4-pieces puzzle template"> View </s-button> </s-grid> </s-box>
