Media card
The media card composition pattern pairs visual content (images, videos, illustrations) with actionable text to help merchants understand features or follow tutorials.
Use media cards on your homepage to introduce features, in settings to explain options, or anywhere visual context helps merchants make decisions. This composition follows proven design guidelines that help your app feel native to the Shopify admin. See Built for Shopify requirements for more details on these guidelines for apps.
Anchor to ExamplesExamples
Merchants can see visual content (images, illustrations) paired with actions, like tutorials or feature highlights. This pattern displays a media card with a tappable image and footer layout. The box uses border and borderRadius for the container, the clickable component makes the image tappable, and the grid lays out the footer with title and action button.
Preview
<s-grid justifyItems="center" alignItems="center" minBlockSize="300px">
<s-box
border="base"
borderRadius="base"
overflow="hidden"
maxInlineSize="216px"
>
<s-clickable href="">
<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-clickable>
<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>
</s-grid>
<s-grid justifyItems="center" alignItems="center" minBlockSize="300px">
<s-box border="base" borderRadius="base" overflow="hidden" maxInlineSize="216px">
<s-clickable href="">
<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>
</s-grid>
jsx
<s-grid justifyItems="center" alignItems="center" minBlockSize="300px">
<s-box
border="base"
borderRadius="base"
overflow="hidden"
maxInlineSize="216px"
>
<s-clickable href="">
<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-clickable>
<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>
</s-grid>html
<s-grid justifyItems="center" alignItems="center" minBlockSize="300px">
<s-box border="base" borderRadius="base" overflow="hidden" maxInlineSize="216px">
<s-clickable href="">
<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>
</s-grid>Anchor to Confirm delete with Modal APIConfirm delete with Modal API
Use the Modal API to confirm deletion before removing a media card item.
Preview
<s-grid justifyItems="center" alignItems="center" minBlockSize="300px">
<s-box
border="base"
borderRadius="base"
overflow="hidden"
maxInlineSize="216px"
>
<s-clickable href="">
<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-clickable>
<s-divider />
<s-grid
gridTemplateColumns="1fr auto 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-button
tone="critical"
variant="tertiary"
icon="delete"
accessibilityLabel="Delete 4-pieces puzzle"
commandFor="delete-modal"
command="--show"
/>
</s-grid>
<s-modal id="delete-modal" heading="Delete template?">
<s-stack direction="block" gap="base">
<s-text>
Are you sure you want to delete the 4-Pieces template? This action cannot be undone.
</s-text>
</s-stack>
<s-button
slot="primary-action"
variant="primary"
tone="critical"
commandFor="delete-modal"
command="--hide"
>
Delete
</s-button>
<s-button
slot="secondary-actions"
commandFor="delete-modal"
command="--hide"
>
Cancel
</s-button>
</s-modal>
</s-box>
</s-grid>
<s-grid justifyItems="center" alignItems="center" minBlockSize="300px">
<s-box
border="base"
borderRadius="base"
overflow="hidden"
maxInlineSize="216px"
>
<s-clickable href="">
<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 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-button
tone="critical"
variant="tertiary"
icon="delete"
accessibilityLabel="Delete 4-pieces puzzle"
commandFor="delete-modal"
command="--show"
></s-button>
</s-grid>
<s-modal id="delete-modal" heading="Delete template?">
<s-stack direction="block" gap="base">
<s-text>
Are you sure you want to delete the 4-Pieces template? This action cannot be undone.
</s-text>
</s-stack>
<s-button
slot="primary-action"
variant="primary"
tone="critical"
commandFor="delete-modal"
command="--hide"
>Delete</s-button>
<s-button
slot="secondary-actions"
commandFor="delete-modal"
command="--hide"
>Cancel</s-button>
</s-modal>
</s-box>
</s-grid>
jsx
<s-grid justifyItems="center" alignItems="center" minBlockSize="300px">
<s-box
border="base"
borderRadius="base"
overflow="hidden"
maxInlineSize="216px"
>
<s-clickable href="">
<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-clickable>
<s-divider />
<s-grid
gridTemplateColumns="1fr auto 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-button
tone="critical"
variant="tertiary"
icon="delete"
accessibilityLabel="Delete 4-pieces puzzle"
commandFor="delete-modal"
command="--show"
/>
</s-grid>
<s-modal id="delete-modal" heading="Delete template?">
<s-stack direction="block" gap="base">
<s-text>
Are you sure you want to delete the 4-Pieces template? This action cannot be undone.
</s-text>
</s-stack>
<s-button
slot="primary-action"
variant="primary"
tone="critical"
commandFor="delete-modal"
command="--hide"
>
Delete
</s-button>
<s-button
slot="secondary-actions"
commandFor="delete-modal"
command="--hide"
>
Cancel
</s-button>
</s-modal>
</s-box>
</s-grid>html
<s-grid justifyItems="center" alignItems="center" minBlockSize="300px">
<s-box
border="base"
borderRadius="base"
overflow="hidden"
maxInlineSize="216px"
>
<s-clickable href="">
<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 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-button
tone="critical"
variant="tertiary"
icon="delete"
accessibilityLabel="Delete 4-pieces puzzle"
commandFor="delete-modal"
command="--show"
></s-button>
</s-grid>
<s-modal id="delete-modal" heading="Delete template?">
<s-stack direction="block" gap="base">
<s-text>
Are you sure you want to delete the 4-Pieces template? This action cannot be undone.
</s-text>
</s-stack>
<s-button
slot="primary-action"
variant="primary"
tone="critical"
commandFor="delete-modal"
command="--hide"
>Delete</s-button>
<s-button
slot="secondary-actions"
commandFor="delete-modal"
command="--hide"
>Cancel</s-button>
</s-modal>
</s-box>
</s-grid>Anchor to Copy link with Toast APICopy link with Toast API
Use the Toast API to show feedback when a link is copied to the clipboard.
<s-box
border="base"
borderRadius="base"
overflow="hidden"
maxInlineSize="216px"
>
<s-clickable href="">
<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-clickable>
<s-divider />
<s-grid
gridTemplateColumns="1fr auto 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-button
variant="tertiary"
icon="link"
accessibilityLabel="Copy link to 4-pieces puzzle template"
onClick={() => {
shopify.toast.show('Link copied to clipboard');
}}
/>
</s-grid>
</s-box>
<s-box
border="base"
borderRadius="base"
overflow="hidden"
maxInlineSize="216px"
>
<s-clickable href="">
<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 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-button
variant="tertiary"
icon="link"
accessibilityLabel="Copy link to 4-pieces puzzle template"
></s-button>
</s-grid>
</s-box>
<!--
Copy link handler:
shopify.toast.show('Link copied to clipboard');
-->
jsx
<s-box
border="base"
borderRadius="base"
overflow="hidden"
maxInlineSize="216px"
>
<s-clickable href="">
<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-clickable>
<s-divider />
<s-grid
gridTemplateColumns="1fr auto 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-button
variant="tertiary"
icon="link"
accessibilityLabel="Copy link to 4-pieces puzzle template"
onClick={() => {
shopify.toast.show('Link copied to clipboard');
}}
/>
</s-grid>
</s-box>html
<s-box
border="base"
borderRadius="base"
overflow="hidden"
maxInlineSize="216px"
>
<s-clickable href="">
<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 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-button
variant="tertiary"
icon="link"
accessibilityLabel="Copy link to 4-pieces puzzle template"
></s-button>
</s-grid>
</s-box>
<!--
Copy link handler:
shopify.toast.show('Link copied to clipboard');
-->Anchor to Edit resources with Intents APIEdit resources with Intents API
Use the Intents API to open Shopify's resource editor when merchants click the edit button.
{}
<s-box
border="base"
borderRadius="base"
overflow="hidden"
maxInlineSize="216px"
>
<s-clickable href="">
<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-clickable>
<s-divider />
<s-grid
gridTemplateColumns="1fr auto"
background="base"
padding="small"
gap="small"
alignItems="center"
>
<s-heading>4-Pieces</s-heading>
<s-button
accessibilityLabel="Edit 4-pieces puzzle in Shopify"
onClick={async () => {
await shopify.intents.invoke('edit:shopify/Product,gid://shopify/Product/123');
}}
>
Edit
</s-button>
</s-grid>
</s-box>
<s-box
border="base"
borderRadius="base"
overflow="hidden"
maxInlineSize="216px"
>
<s-clickable href="">
<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 accessibilityLabel="Edit 4-pieces puzzle in Shopify">Edit</s-button>
</s-grid>
</s-box>
<!--
Edit handler:
await shopify.intents.invoke('edit:shopify/Product,gid://shopify/Product/123');
-->
jsx
{/* @validate-ignore: Cannot invoke an object which is possibly 'undefined' */}
<s-box
border="base"
borderRadius="base"
overflow="hidden"
maxInlineSize="216px"
>
<s-clickable href="">
<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-clickable>
<s-divider />
<s-grid
gridTemplateColumns="1fr auto"
background="base"
padding="small"
gap="small"
alignItems="center"
>
<s-heading>4-Pieces</s-heading>
<s-button
accessibilityLabel="Edit 4-pieces puzzle in Shopify"
onClick={async () => {
await shopify.intents.invoke('edit:shopify/Product,gid://shopify/Product/123');
}}
>
Edit
</s-button>
</s-grid>
</s-box>html
<s-box
border="base"
borderRadius="base"
overflow="hidden"
maxInlineSize="216px"
>
<s-clickable href="">
<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 accessibilityLabel="Edit 4-pieces puzzle in Shopify">Edit</s-button>
</s-grid>
</s-box>
<!--
Edit handler:
await shopify.intents.invoke('edit:shopify/Product,gid://shopify/Product/123');
-->Use the Share API to let merchants share templates via the native share sheet on mobile devices.
<s-box
border="base"
borderRadius="base"
overflow="hidden"
maxInlineSize="216px"
>
<s-clickable href="">
<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-clickable>
<s-divider />
<s-grid
gridTemplateColumns="1fr auto 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-button
variant="tertiary"
icon="share"
accessibilityLabel="Share 4-pieces puzzle template"
onClick={async () => {
try {
await navigator.share({
text: 'Check out this puzzle template!',
url: 'https://example.com/puzzles/4-pieces',
});
} catch (err) {
console.log('Share cancelled or failed');
}
}}
/>
</s-grid>
</s-box>
<s-box
border="base"
borderRadius="base"
overflow="hidden"
maxInlineSize="216px"
>
<s-clickable href="">
<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 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-button
variant="tertiary"
icon="share"
accessibilityLabel="Share 4-pieces puzzle template"
></s-button>
</s-grid>
</s-box>
<!--
Share handler:
try {
await navigator.share({
text: 'Check out this puzzle template!',
url: 'https://example.com/puzzles/4-pieces',
});
} catch (err) {
console.log('Share cancelled or failed');
}
-->
jsx
<s-box
border="base"
borderRadius="base"
overflow="hidden"
maxInlineSize="216px"
>
<s-clickable href="">
<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-clickable>
<s-divider />
<s-grid
gridTemplateColumns="1fr auto 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-button
variant="tertiary"
icon="share"
accessibilityLabel="Share 4-pieces puzzle template"
onClick={async () => {
try {
await navigator.share({
text: 'Check out this puzzle template!',
url: 'https://example.com/puzzles/4-pieces',
});
} catch (err) {
console.log('Share cancelled or failed');
}
}}
/>
</s-grid>
</s-box>html
<s-box
border="base"
borderRadius="base"
overflow="hidden"
maxInlineSize="216px"
>
<s-clickable href="">
<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 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-button
variant="tertiary"
icon="share"
accessibilityLabel="Share 4-pieces puzzle template"
></s-button>
</s-grid>
</s-box>
<!--
Share handler:
try {
await navigator.share({
text: 'Check out this puzzle template!',
url: 'https://example.com/puzzles/4-pieces',
});
} catch (err) {
console.log('Share cancelled or failed');
}
-->Was this page helpful?