Metrics card
Merchants want to see how they're doing at a glance. The metrics card composition highlights important numbers, statistics, or trends so merchants can quickly understand their activity and performance.
Use metrics cards on your homepage or dashboard to surface the data merchants care about most. Include trend indicators when historical comparison adds context. 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
Anchor to Display metrics in a responsive grid with trend indicatorsDisplay metrics in a responsive grid with trend indicators
Merchants want to see key numbers and trends at a glance. This pattern displays metrics in a responsive grid with trend indicators. The grid uses responsive column templates for side-by-side layout on large screens and stacked layout on small screens. The badge component shows trend indicators.
Preview
<s-section padding="base">
<s-grid
gridTemplateColumns="@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr"
gap="small"
>
<s-clickable
href=""
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Total Designs</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>156</s-text>
<s-badge tone="success" icon="arrow-up">
{" "}
12%{" "}
</s-badge>
</s-stack>
</s-grid>
</s-clickable>
<s-divider direction="block" />
<s-clickable
href=""
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Units Sold</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>2,847</s-text>
<s-badge tone="warning">0%</s-badge>
</s-stack>
</s-grid>
</s-clickable>
<s-divider direction="block" />
<s-clickable
href=""
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Return Rate</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>3.2%</s-text>
<s-badge tone="critical" icon="arrow-down">
{" "}
0.8%{" "}
</s-badge>
</s-stack>
</s-grid>
</s-clickable>
</s-grid>
</s-section>
<s-section padding="base">
<s-grid
gridTemplateColumns="@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr"
gap="small"
>
<s-clickable
href=""
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Total Designs</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>156</s-text>
<s-badge tone="success" icon="arrow-up"> 12% </s-badge>
</s-stack>
</s-grid>
</s-clickable>
<s-divider direction="block"></s-divider>
<s-clickable
href=""
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Units Sold</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>2,847</s-text>
<s-badge tone="warning">0%</s-badge>
</s-stack>
</s-grid>
</s-clickable>
<s-divider direction="block"></s-divider>
<s-clickable
href=""
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Return Rate</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>3.2%</s-text>
<s-badge tone="critical" icon="arrow-down"> 0.8% </s-badge>
</s-stack>
</s-grid>
</s-clickable>
</s-grid>
</s-section>
jsx
<s-section padding="base">
<s-grid
gridTemplateColumns="@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr"
gap="small"
>
<s-clickable
href=""
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Total Designs</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>156</s-text>
<s-badge tone="success" icon="arrow-up">
{" "}
12%{" "}
</s-badge>
</s-stack>
</s-grid>
</s-clickable>
<s-divider direction="block" />
<s-clickable
href=""
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Units Sold</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>2,847</s-text>
<s-badge tone="warning">0%</s-badge>
</s-stack>
</s-grid>
</s-clickable>
<s-divider direction="block" />
<s-clickable
href=""
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Return Rate</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>3.2%</s-text>
<s-badge tone="critical" icon="arrow-down">
{" "}
0.8%{" "}
</s-badge>
</s-stack>
</s-grid>
</s-clickable>
</s-grid>
</s-section>html
<s-section padding="base">
<s-grid
gridTemplateColumns="@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr"
gap="small"
>
<s-clickable
href=""
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Total Designs</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>156</s-text>
<s-badge tone="success" icon="arrow-up"> 12% </s-badge>
</s-stack>
</s-grid>
</s-clickable>
<s-divider direction="block"></s-divider>
<s-clickable
href=""
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Units Sold</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>2,847</s-text>
<s-badge tone="warning">0%</s-badge>
</s-stack>
</s-grid>
</s-clickable>
<s-divider direction="block"></s-divider>
<s-clickable
href=""
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Return Rate</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>3.2%</s-text>
<s-badge tone="critical" icon="arrow-down"> 0.8% </s-badge>
</s-stack>
</s-grid>
</s-clickable>
</s-grid>
</s-section>Use href attributes on clickable metrics to navigate merchants to detailed analytics pages.
<s-section padding="base">
<s-grid
gridTemplateColumns="@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr"
gap="small"
>
<s-clickable
href="/app/analytics/designs"
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Total Designs</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>156</s-text>
<s-badge tone="success" icon="arrow-up">12%</s-badge>
</s-stack>
</s-grid>
</s-clickable>
<s-divider direction="block" />
<s-clickable
href="/app/analytics/sales"
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Units Sold</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>2,847</s-text>
<s-badge tone="warning">0%</s-badge>
</s-stack>
</s-grid>
</s-clickable>
<s-divider direction="block" />
<s-clickable
href="/app/analytics/returns"
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Return Rate</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>3.2%</s-text>
<s-badge tone="critical" icon="arrow-down">0.8%</s-badge>
</s-stack>
</s-grid>
</s-clickable>
</s-grid>
</s-section>
<s-section padding="base">
<s-grid
gridTemplateColumns="@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr"
gap="small"
>
<s-clickable
href="/app/analytics/designs"
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Total Designs</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>156</s-text>
<s-badge tone="success" icon="arrow-up">12%</s-badge>
</s-stack>
</s-grid>
</s-clickable>
<s-divider direction="block"></s-divider>
<s-clickable
href="/app/analytics/sales"
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Units Sold</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>2,847</s-text>
<s-badge tone="warning">0%</s-badge>
</s-stack>
</s-grid>
</s-clickable>
<s-divider direction="block"></s-divider>
<s-clickable
href="/app/analytics/returns"
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Return Rate</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>3.2%</s-text>
<s-badge tone="critical" icon="arrow-down">0.8%</s-badge>
</s-stack>
</s-grid>
</s-clickable>
</s-grid>
</s-section>
jsx
<s-section padding="base">
<s-grid
gridTemplateColumns="@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr"
gap="small"
>
<s-clickable
href="/app/analytics/designs"
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Total Designs</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>156</s-text>
<s-badge tone="success" icon="arrow-up">12%</s-badge>
</s-stack>
</s-grid>
</s-clickable>
<s-divider direction="block" />
<s-clickable
href="/app/analytics/sales"
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Units Sold</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>2,847</s-text>
<s-badge tone="warning">0%</s-badge>
</s-stack>
</s-grid>
</s-clickable>
<s-divider direction="block" />
<s-clickable
href="/app/analytics/returns"
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Return Rate</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>3.2%</s-text>
<s-badge tone="critical" icon="arrow-down">0.8%</s-badge>
</s-stack>
</s-grid>
</s-clickable>
</s-grid>
</s-section>html
<s-section padding="base">
<s-grid
gridTemplateColumns="@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr"
gap="small"
>
<s-clickable
href="/app/analytics/designs"
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Total Designs</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>156</s-text>
<s-badge tone="success" icon="arrow-up">12%</s-badge>
</s-stack>
</s-grid>
</s-clickable>
<s-divider direction="block"></s-divider>
<s-clickable
href="/app/analytics/sales"
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Units Sold</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>2,847</s-text>
<s-badge tone="warning">0%</s-badge>
</s-stack>
</s-grid>
</s-clickable>
<s-divider direction="block"></s-divider>
<s-clickable
href="/app/analytics/returns"
paddingBlock="small-400"
paddingInline="small-100"
borderRadius="base"
>
<s-grid gap="small-300">
<s-heading>Return Rate</s-heading>
<s-stack direction="inline" gap="small-200">
<s-text>3.2%</s-text>
<s-badge tone="critical" icon="arrow-down">0.8%</s-badge>
</s-stack>
</s-grid>
</s-clickable>
</s-grid>
</s-section>Was this page helpful?