Skip to content
This repository was archived by the owner on Sep 30, 2025. It is now read-only.

Commit 2fdcdb8

Browse files
laurkimlaurkim
committed
[Card] Add styleguide examples and documentation
1 parent 559e503 commit 2fdcdb8

17 files changed

+858
-1
lines changed

‎polaris.shopify.com/content/components/layout-and-structure/card.mdx‎

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ examples:
2626
- fileName: card-default.tsx
2727
title: Default
2828
description: >-
29-
By default, cards have an 8px border radius and uses `--p-color-bg-surface` as the background and `--p-shadow-300` as the shadow. There is padding of `space-500` (20px) around children and `space-400` (16px) for small screens.
29+
By default, cards have an 8px border radius and uses `--p-color-bg-surface` as the background and `--p-shadow-300` as the shadow. There is padding of `space-400` (16px) around children.
3030
- fileName: card-with-subdued-background.tsx
3131
title: With subdued background
3232
description: >-
@@ -39,6 +39,70 @@ examples:
3939
title: With responsive border radius
4040
description: >-
4141
Use the `roundedAbove` property to adjust the border radius of the card based on a set breakpoint.
42+
- fileName: card-with-section.tsx
43+
title: With section
44+
description: >-
45+
Use when you have a distinct piece of information to communicate to merchants.
46+
- fileName: card-with-subdued-section.tsx
47+
title: With subdued section
48+
description: >-
49+
Use to indicate when one of the sections in your card contains inactive or disabled content.
50+
- fileName: card-with-multiple-sections.tsx
51+
title: With multiple sections
52+
description: >-
53+
Use when you have two related but distinct pieces of information to communicate to merchants. Multiple sections can help break up complicated concepts to make them easier to scan and understand.
54+
- fileName: card-with-multiple-titled-sections.tsx
55+
title: With multiple titled sections
56+
description: >-
57+
Use when you have two related but distinct pieces of information to communicate to merchants that are complex enough to require a title to introduce them.
58+
- fileName: card-with-subsection.tsx
59+
title: With subsection
60+
description: >-
61+
Use when your card sections need further categorization.
62+
- fileName: card-with-flushed-section.tsx
63+
title: With flushed section
64+
description: >-
65+
Use when you need further control over the spacing of your card sections.
66+
- fileName: card-with-sections-and-actions.tsx
67+
title: With sections and actions
68+
description: >-
69+
Use when your card section has actions that apply only to that section.
70+
- fileName: card-with-sections-and-destructive-action.tsx
71+
title: With sections and destructive action
72+
description: >-
73+
Use when a card action applies only to one section and will delete merchant data or be otherwise difficult to recover from.
74+
- fileName: card-with-separate-header.tsx
75+
title: With separate header
76+
description: >-
77+
Use to be able to use custom React elements as header content.
78+
- fileName: card-with-header-actions.tsx
79+
title: With header actions
80+
description: >-
81+
Use for less important card actions, or actions merchants may do before reviewing the contents of the card. For example, merchants may want to add items to a card containing a long list, or enter a customer’s new address.
82+
- fileName: card-with-footer-actions.tsx
83+
title: With footer actions
84+
description: >-
85+
Use footer actions for a card’s most important actions, or actions merchants should do after reviewing the contents of the card. For example, merchants should review the contents of a shipment before an important action like adding tracking information.
86+
- fileName: card-with-multiple-footer-actions.tsx
87+
title: With multiple footer actions
88+
description: >-
89+
Use when there are multiple secondary footer actions that are rendered in an action list popover activated by a disclosure button.
90+
- fileName: card-with-custom-footer-actions.tsx
91+
title: With custom footer actions
92+
description: >-
93+
Use to present actionable content that is optional or not the primary purpose of the page.
94+
- fileName: card-with-destructive-footer-actions.tsx
95+
title: With destructive footer action
96+
description: >-
97+
Use when a card action will delete merchant data or be otherwise difficult to recover from.
98+
- fileName: card-with-custom-react-node-title.tsx
99+
title: With custom React Node title
100+
description: >-
101+
Use to render custom content such as icons, links, or buttons in a card section’s header.
102+
- fileName: card-with-all-elements.tsx
103+
title: With all elements
104+
description: >-
105+
Use as a broad example that includes using other layout components to build out the card.
42106
previewImg: /images/components/layout-and-structure/card.png
43107
---
44108

‎polaris.shopify.com/pages/examples/card-with-all-elements.tsx‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import React, {useState} from 'react';
2+
import {
3+
ActionList,
4+
Bleed,
5+
BlockStack,
6+
Box,
7+
Button,
8+
ButtonGroup,
9+
Card,
10+
InlineGrid,
11+
InlineStack,
12+
List,
13+
Popover,
14+
ResourceList,
15+
Text,
16+
} from '@shopify/polaris';
17+
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
18+
19+
function CardWithAllElements() {
20+
const [actionActive, toggleAction] = useState(false);
21+
22+
const handleToggleAction = () => {
23+
toggleAction(!actionActive);
24+
};
25+
26+
const items = [{content: 'Gross Sales'}, {content: 'Net Sales'}];
27+
28+
const disclosureButtonActivator = (
29+
<Button variant="plain" disclosure onClick={handleToggleAction}>
30+
View Sales
31+
</Button>
32+
);
33+
34+
const disclosureButton = (
35+
<Popover
36+
active={actionActive}
37+
activator={disclosureButtonActivator}
38+
onClose={handleToggleAction}
39+
>
40+
<ActionList items={items} />
41+
</Popover>
42+
);
43+
44+
const salesMarkup = (
45+
<Box>
46+
<ResourceList
47+
resourceName={{singular: 'sale', plural: 'sales'}}
48+
items={[
49+
{
50+
sales: 'Orders',
51+
amount: 'USD$0.00',
52+
url: '#',
53+
},
54+
{
55+
sales: 'Returns',
56+
amount: '-USD$250.00',
57+
url: '#',
58+
},
59+
]}
60+
renderItem={(item) => {
61+
const {sales, amount, url} = item;
62+
return (
63+
<ResourceList.Item
64+
id={sales}
65+
url={url}
66+
accessibilityLabel={`View Sales for ${sales}`}
67+
>
68+
<InlineStack align="space-between">
69+
<div>{sales}</div>
70+
<div>{amount}</div>
71+
</InlineStack>
72+
</ResourceList.Item>
73+
);
74+
}}
75+
/>
76+
</Box>
77+
);
78+
79+
return (
80+
<Card roundedAbove="sm">
81+
<BlockStack gap="200">
82+
<InlineGrid columns="1fr auto">
83+
<Text as="h2" variant="headingSm">
84+
Sales
85+
</Text>
86+
<ButtonGroup>
87+
<Button variant="plain">Total Sales</Button>
88+
{disclosureButton}
89+
</ButtonGroup>
90+
</InlineGrid>
91+
<BlockStack gap="400">
92+
<Text as="p" variant="bodyMd">
93+
You can use sales reports to see information about your customers’
94+
orders based on criteria such as sales over time, by channel, or by
95+
staff.
96+
</Text>
97+
<Text as="h3" variant="headingSm" fontWeight="medium">
98+
Total Sales Breakdown
99+
</Text>
100+
</BlockStack>
101+
{salesMarkup}
102+
<Bleed marginInline="400">
103+
<Box
104+
background="bg-surface-secondary"
105+
paddingBlock="300"
106+
paddingInline="400"
107+
>
108+
<BlockStack gap="200">
109+
<Text as="h3" variant="headingSm" fontWeight="medium">
110+
Deactivated reports
111+
</Text>
112+
<List>
113+
<List.Item>Payouts</List.Item>
114+
<List.Item>Total Sales By Channel</List.Item>
115+
</List>
116+
</BlockStack>
117+
</Box>
118+
</Bleed>
119+
<BlockStack gap="200">
120+
<Text as="h3" variant="headingSm" fontWeight="medium">
121+
Note
122+
</Text>
123+
<Text as="p" variant="bodyMd">
124+
The sales reports are available only if your store is on the Shopify
125+
plan or higher.
126+
</Text>
127+
<InlineStack align="end">
128+
<ButtonGroup>
129+
<Button onClick={() => {}} accessibilityLabel="Dismiss">
130+
Dismiss
131+
</Button>
132+
<Button
133+
variant="primary"
134+
onClick={() => {}}
135+
accessibilityLabel="Export Report"
136+
>
137+
Export Report
138+
</Button>
139+
</ButtonGroup>
140+
</InlineStack>
141+
</BlockStack>
142+
</BlockStack>
143+
</Card>
144+
);
145+
}
146+
147+
export default withPolarisExample(CardWithAllElements);

‎polaris.shopify.com/pages/examples/card-with-custom-footer-actions.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import {
3+
BlockStack,
4+
Button,
5+
ButtonGroup,
6+
Card,
7+
InlineStack,
8+
Text,
9+
} from '@shopify/polaris';
10+
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
11+
12+
function CardWithCustomFooterActions() {
13+
return (
14+
<Card roundedAbove="sm">
15+
<BlockStack gap="500">
16+
<BlockStack gap="200">
17+
<Text as="h2" variant="headingSm">
18+
Secure your account with 2-step authentication
19+
</Text>
20+
<Text as="p" variant="bodyMd">
21+
Two-step authentication adds an extra layer of security when logging
22+
in to your account. A special code will be required each time you
23+
log in, ensuring only you can access your account.
24+
</Text>
25+
</BlockStack>
26+
<InlineStack align="end">
27+
<ButtonGroup>
28+
<Button
29+
onClick={() => {}}
30+
accessibilityLabel="Enable two-step authentication"
31+
>
32+
Enable two-step authentication
33+
</Button>
34+
<Button variant="plain">Learn more</Button>
35+
</ButtonGroup>
36+
</InlineStack>
37+
</BlockStack>
38+
</Card>
39+
);
40+
}
41+
42+
export default withPolarisExample(CardWithCustomFooterActions);

‎polaris.shopify.com/pages/examples/card-with-custom-react-node-title.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import {
3+
BlockStack,
4+
Card,
5+
Icon,
6+
InlineStack,
7+
List,
8+
Text,
9+
} from '@shopify/polaris';
10+
import {ProductsMinor} from '@shopify/polaris-icons';
11+
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
12+
13+
function CardWithCustomReactNodeTitle() {
14+
return (
15+
<Card roundedAbove="sm">
16+
<BlockStack gap="200">
17+
<Text as="h2" variant="headingSm">
18+
Products
19+
</Text>
20+
<BlockStack inlineAlign="start">
21+
<InlineStack gap="400">
22+
<Icon source={ProductsMinor} />
23+
<Text as="h3" variant="headingSm">
24+
New Products
25+
</Text>
26+
</InlineStack>
27+
</BlockStack>
28+
<List>
29+
<List.Item>Socks</List.Item>
30+
<List.Item>Super Shoes</List.Item>
31+
</List>
32+
</BlockStack>
33+
</Card>
34+
);
35+
}
36+
37+
export default withPolarisExample(CardWithCustomReactNodeTitle);

‎polaris.shopify.com/pages/examples/card-with-destructive-footer-actions.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import {
3+
BlockStack,
4+
Button,
5+
ButtonGroup,
6+
Card,
7+
InlineStack,
8+
List,
9+
Text,
10+
} from '@shopify/polaris';
11+
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
12+
13+
function CardWithDestructiveFooterActions() {
14+
return (
15+
<Card roundedAbove="sm">
16+
<BlockStack gap="200">
17+
<Text as="h2" variant="headingSm">
18+
Shipment 1234
19+
</Text>
20+
<BlockStack gap="200">
21+
<Text as="h3" variant="headingSm" fontWeight="medium">
22+
Items
23+
</Text>
24+
<List>
25+
<List.Item>1 × Oasis Glass, 4-Pack</List.Item>
26+
<List.Item>1 × Anubis Cup, 2-Pack</List.Item>
27+
</List>
28+
</BlockStack>
29+
<InlineStack align="end">
30+
<ButtonGroup>
31+
<Button
32+
variant="primary"
33+
tone="critical"
34+
onClick={() => {}}
35+
accessibilityLabel="Cancel shipment"
36+
>
37+
Cancel shipment
38+
</Button>
39+
<Button
40+
variant="primary"
41+
onClick={() => {}}
42+
accessibilityLabel="Add tracking number"
43+
>
44+
Add tracking number
45+
</Button>
46+
</ButtonGroup>
47+
</InlineStack>
48+
</BlockStack>
49+
</Card>
50+
);
51+
}
52+
53+
export default withPolarisExample(CardWithDestructiveFooterActions);

‎polaris.shopify.com/pages/examples/card-with-flushed-section.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import {Bleed, Box, Card, Image, Text} from '@shopify/polaris';
3+
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
4+
5+
function CardWithFlushedSection() {
6+
return (
7+
<Card roundedAbove="sm">
8+
<Bleed marginInline="400" marginBlock="400">
9+
<Image
10+
source="https://burst.shopifycdn.com/photos/black-orange-stripes_373x@2x.jpg"
11+
alt="a sheet with purple and orange stripes"
12+
/>
13+
<Box background="bg-surface-secondary" padding="400">
14+
<Text as="p" variant="bodyMd">
15+
You can use sales reports to see information about your customers’
16+
orders based on criteria such as sales over time, by channel, or by
17+
staff.
18+
</Text>
19+
</Box>
20+
</Bleed>
21+
</Card>
22+
);
23+
}
24+
25+
export default withPolarisExample(CardWithFlushedSection);

0 commit comments

Comments
 (0)