Skip to contentShopify logoPolaris

Card layout

Standardized card layout gives merchants a content structure to rely on.

Anatomy

Cards are made up of three main parts: the header, the body, and the footer. Each part has a specific role and should contain content that serves that role.

A standardized structure ensures that common elements can be placed consistently. Consistent placement allows merchants to attach meaning to places, shape expectations, and quickly find what they are looking for.

A breakdown of major card parts; header up top, body in the middle, and footer at the bottom.

Header

The header represents the whole card. It typically has a card title that makes the card easy to find, and often a header action that allows merchants to modify the card contents or navigate to where they can view more details.

Card titles

The card title represents the whole card. It should describe the purpose of the card and help merchants quickly find it among other cards.

Three examples of good card titles that describe the purpose of the card.
A card with a title that conveys the purpose of the card content.
Do

Choose a title that clearly conveys the purpose of the card.

A card with a Products as card title and a list of products in its body. An arrow pointing from the title towards the list to show that the title represents the object type in the list.
Do

Use the object type as card title when the card is a list of objects.

A card with tags as card title and a header action. The header action has a pen icon only, but no label. The action conveys that it’s an edit action, and leverages the card title to make it clear what is being updated.
Do

Choose a title to clarify what the header action does.

A card with Contact information as title showing how it represents the following card section titles, address and social media.
Do

Choose a title that represents all sections if a card has multiple sections.

Header actions

Actions in the header should represent the content of the whole card. The most common header action is the "Edit" action, which allows merchants to modify the contents of the card. Another common action is the "View" action, which allows merchants to navigate to the source of the contents.

The headers of two cards showing icon only buttons.
A mouse cursor hovering an icon only header action with a clarifying tool tip floating above it.
Do

Default to using tertiary icon buttons in the header. Clarify the action with a tooltip.

A card showing a call to action in the header.
Don't

Place call-to-actions in the card header. Instead, place them in the card footer where merchants typically find actions that progress towards their goals. See footer actions.

A card showing an item action being placed on a list item.
Do

Place actions that affect specific list items on the item itself.

A card showing an item action being placed in the card header.
Don't

Place action in the header unless it represents the entire card. Instead, place the action in proximity to what it represents.

A card showing an add item list action being placed in the card header.
Caution

Avoid placing list actions in the card header by default. Default to placing such actions at the end of the list where the added item will appear. If cards only contain a list, then list actions may be placed in the header for merchant convenience.

A card showing a three dot icon in the header.
Don't

Group actions in the header by default. Instead, use these guidelines to find placements that have meaning to merchants.

Table actions

Table actions are placed to the right in the header to keep them discoverable. They are typically actions that allow merchants to add item or select items that will display in the table.

A card showing an add action associated with an index table in the card header.

Body

The body holds the main content of a card. Common content types, such as lists, tables, and form layouts, are organized into one or multiple card sections.

Card sections

Card sections are used to group content in cards, and to separate such groups when there are more than one. A section typically has a heading and a main block of content, such as a list or a form layout.

A card showing a card body with two card sections outlined.
A card showing a card body with two card sections. Both sections have blue outlines.
Do

Use a card with multiple sections to group content that shares purpose.

A card showing a list with each item being wrapped by its own card section. Each item has a red outline to indicate improper usage.
Don't

Use card sections to divide list items. Instead, use the appropriate list component or build a bespoke list structure within a single section.

A card with a single section having no section title in addition to the card title.
Do

Omit the section title in cards with a single section. However, maintain the space-200 gap as typically used between section titles and content.

A card that so many list items that it doesn’t fit in the view.
Don't

Allow cards to become so tall that they are difficult to overview. Instead, provide a footer action that allows merchants to expand and collapse the content.

A card with two sections, each with an edit action in its respective section header.
Do

Place section actions in the section header where merchants can associate them to what they control.

A card with two sections and an action list in the card header. Inside the action lists are actions that correspond with each section title.
Don't

Group section actions in the card header, as it disconnects them from what they control. Instead, place such actions in the respective section header.

Form layouts

Form layouts are containers that give structure to form elements, or “form layout items”. They often contain multiple items, but can also house a single one.

A card with a form layout with four form layout items inside.
A card with a form layout wrapped in a card section.
Do

Form layouts are containers that give structure to form elements, or “form layout items”. They often contain multiple items, but can also house a single one.

A card with a single form layout item wrapped in a form layout.
Do

Use a form layout even when there is only a single item.

A card with three text fields stretching the full width of the card, while their inputs are brief.
Don't

Allow form layout items to be wider than necessary. Instead, use a form layout group to arrange them side-by-side.

A card showing two choice lists that take up the full width of the card while only occupying a quarter of it with content.
Don't

Allow large areas of empty space to appear next to choice lists. Instead, find alternatives that make better use of horizontal space.

Footer

The footer is placed after the main content, which makes it an intuitive place for content and actions that extends from the card content. For example, call-to-actions that allow merchants to react to the card and continue with their next task.

Call-to-actions

Call-to-actions are specific prompts designed to guide merchants towards a goal. They are placed towards the right to inspire progress. A card can have none, one, or multiple call-to-actions. They are placed in the footer, so that merchants can react to the card contents and easily take the next step forward.

A card with two calls to actions in the footer, one basic button to the left and one primary to the right.
A card with a basic button call to action in the footer.
Do

Default to using basic buttons in the footer. Only use a primary button when it’s the most important action on the page.

A card footer with a basic button with a suffix chevron icon. Below the button is an action list with three call to actions.
Do

Use an action list if the card has more than two call-to-actions.

A card footer showing typical header actions in the footer.
Don't

Use call-to-actions in the footer to update the content or presentation of the card. Instead, use header actions and list actions.

A card footer with a primary button with the label Go to orders.
Don't

Use a primary button for actions that aren’t critical to fulfilling the purpose of the page.

List actions

List actions are placed to the left in the footer. They are typically actions that allow merchants to add items to lists or expand and collapse the list.

A card with a list and a list action at the bottom of the list. The label says add product.
A card with a collapsed list in its body and a show more list action in the footer.
Do

Allow merchants to expand and collapse long lists.

A card that repeats the object name listed three times. The object name locations appears in the card title, the multi select check box label, and in the show more list action.
Don't

Repeat the object name in the button label. Instead, choose a card title that makes it clear what is being added to the list.

Spacing for merchants

When composing card content, spacing is used to achieve two important visual effects: grouping and hierarchy. When merchants can perceive clear grouping and hierarchy, it’s easier for them to scan a lot of content and faster find what they need.

In the admin, spacing is mainly achieved using padding and stacks.

A schematic of a card showing padding being used around the contents of the card and stacks to space content inside it.

Padding

Padding is the space between a container’s content and its border. The default card padding is space-400.

A schematic of a card showing padding being used around the contents of the card and stacks to space content inside it.

Nested padding

It’s common that cards have containers nested inside them. When these containers have visual boundaries, such as with borders or dividers, then padding is used to create space between its content and border.

The general rule is that the deeper an element is nested, the smaller its padding is.

A schematic of a card showing space-300 padding being used around the contents of a container nested inside the card.
A card with visual overlays showing how padding is applied around the contents of a card and bleed being used to create negative margin to optically adjust a icon only button.
Do

Apply padding to the card by default, and use bleed with a negative margin to optically adjust content if needed.

A card showing how padding is used improperly to space content that should be using stacks.
Don't

Use padding to create space between elements. Instead, use block stacks.

A card showing proper usage of padding when creating space around a list or table header with borders.
Do

Use padding inside visually scoped containers, such as the header of a data table.

A card showing how padding is used improperly to create space around a card section.
Don't

Use padding for invisible containers, such as card sections or form layouts. Instead, use block stacks.

Stacks and gaps

Stacks are used to group content and give equal spacing between the elements within the group. The space between the elements is called the gap, and is always the same between each element.

A simple schematic showing a stack with gaps.

Nested stacks

Stacks can also be nested to apply different gaps between different groups of content. It’s the difference between the gap sizes that creates the effect of grouping and hierarchy. Elements with tighter gaps are perceived as more related than those with a looser gap.

A simple schematic of two nested stacks, one placed as a child inside of the other. The inner stack has a smaller gap than the outer. A label saying closely related is pointing to the inner stack, and a label saying loosely related is pointing to the outer.
A card example showing nested stacks applied. The outer stack has space-300 gaps between its three blocks; the card header and two form layout items. The form items are stacks with space-100 gaps between its blocks.
Do

Use nested stacks to help merchants distinguish between closely and loosely related content, such as between sibling items and the content within an item.

An example showing a card with a single stack of multiple types of blocks with space-200 gaps between.
Don't

Use a flat hierarchy for content that should have different spatial relationships. For example, labels should be closer connected to the element it represents than to the element it doesn’t.

A example showing a card with a stack of sections with space-400 gaps between them. Each section is a stack with space-200 gaps.
Do

Use nested stacks to clearly associate section titles to the content they represent.

An example showing a card with a single stack with space-200 gaps. Its blocks are section titles and section content. The equal space between the blocks center the section titles between the section content blocks, making it unclear which they belong to.
Don't

Use a flat hierarchy that causes section titles to float with equal space to sections above and below.

Common stacks

There are a few common stacks that can be used to meet recurring spacing needs. These stacks have gaps that range from space-100 to space-400, and they are purposefully used to create a familiar hierarchy of groups in cards across the admin.

A simplified schematic showing nested stacks with three different gap sizes; 400, 200, and 100. The stacks with smaller gap sizes are blocks inside stacks with bigger gap sizes.

Space-100 is the tightest gap in cards and is used to group the most related elements. The tight spacing makes the grouped elements stand out like a unified item amongst surrounding groups.

A simplified schematic showing nested stacks with three different gap sizes; 400, 200, and 100. The stacks with smaller gap sizes are blocks inside stacks with bigger gap sizes. The stacks with space-100 gaps are highlighted.
A part of a card showing two form layout items as stacks with space-100 gaps.
Do

Use space-100 between the elements within a form layout item.

Two separate card parts showing stacks with space-100 gaps between the blocks. The stacks are lists and the blocks are simple list items without inner blocks.
Do

Use space-100 between list items without help text or other types of child elements.

Space-200 is the second tightest gap and is typically used to separate blocks of content inside card sections. Using space-200 is the most common way to space stacks that use space-100 gaps.

A simple schematic showing a card section as a stack with space-200 gaps between its blocks. The blocks are the section header and two generic lists. The lists are stacks with space-100 gaps.
A generic card with its content blocks in a stack with space-200 gaps.
Do

Use space-200 between the header, body, and footer in a card with a single section.

A part of a card showing a card section as a stack with space-200 gaps between its blocks.
Do

Use space-200 between the heading and content of a card section.

An example card with a list of checkbox items. The list is a stack with space-200 gaps. Single block list items are blocks in the list stack. Multi-block list items are stacks with space-100 gaps.
Do

Use space-200 between items that are stacks with space-100 gaps. Grouping such items looser creates a distinguishable contrast to the tighter inner group.

A part of a card showing a card section. The content block of the section is a list of single block items in a stack with space-200 gaps.
Don't

Use space-200 between simple list items. Instead, use space-100 as these are the innermost groups.

Space-300 gaps are typically used to ensure clear separation between blocks containing closely related but irregularly shaped content, such as form layout items.

While space-200 gaps might seem logical around stacks with space-100 gaps, a smaller gap size often obscures groupings when block boundaries are hard to discern. This is particularly true for form layout items, where labels, inputs, and help text all exhibit variable size, shape, and weight. By increasing the gap size, content blocks can be more readily perceived as unified, discrete items.

A simple schematic showing a stack with two blocks; card header and form layout. The form layout is a stack of form layout items. Both stacks have space-300 gaps.
An example card showing a form layout with multiple form layout items. The form layout is a stack with space-300 gaps.
Do

Use space-300 between form layout items.

An example card showing a form layout with multiple form layout items. The form layout is a stack with space-200 gaps. The gap size causes unclear separation between two form layout items.
Don't

Use too tight spacing between groups of elements that have variable weight and shape, such as form layout items.

Space-400 is the loosest card gap and is typically used to space cards with multiple sections. The gap size is the same as the card padding, which structures sections as neatly merged cards.

A simple schematic showing a stack with three blocks; card header and two card sections. The stack has space-400 gaps between its blocks. The card sections are stacks with space-200 between its blocks.
An example card showing multiple card sections as stacks separated by space-400 gaps. The card sections are stacks with space-200 between its blocks.
Do

Use space-400 to separate card sections inside cards.

An example card showing multiple card sections as stacks separated by space-400 gaps. The card sections are stacks with space-400 between its blocks, causing too much distance between section titles and section content.
Don't

Use space-400 inside card sections, as it can disconnect content that belongs together. Instead, default to space-200 and upsize to space-300 if the former seems too tight.

Alignment

Content alignment makes cards more balanced and easier for merchants to scan. Content should be vertically aligned along both the left and right edge of the card. It’s always more important to align content optically, so that it appears to be aligned rather than technically being aligned.

A card titled Products containing a resource list of products. Clarifying lines show how content is perfectly vertically aligned on both left and right sides.
An example card showing multiple card sections as stacks separated by space-400 gaps. The card sections are stacks with space-200 between its blocks.
Do

Use space-400 to separate card sections inside cards.

An example card showing multiple card sections as stacks separated by space-400 gaps. The card sections are stacks with space-400 between its blocks, causing too much distance between section titles and section content.
Don't

Use space-400 inside card sections, as it can disconnect content that belongs together. Instead, default to space-200 and upsize to space-300 if the former seems too tight.

    On this page