UNPKG

@shopify/polaris

Version:

Shopify’s product component library

github.com/Shopify/polaris

Shopify/polaris

87 lines (59 loc) • 2.06 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
--- name: Subheading category: Titles and text keywords: - title bar - top-level - description - sub-section titles - titles of sub-sections - subsection titles - titles of subsections - card subheadings - card section headings - headings of card sections - card section subheadings --- # Subheading Subheadings are used for the title of any sub-sections in top-level page sections. Generally, sections of a card use subheadings for their titles --- ## Purpose Put the merchant first by identifying the problem they face and the component that helps them solve it. ### Problem Merchants want to find a particular piece of content quickly. ### Solution Subheadings provide visual wayfinding cues in a card or page section so merchants can scan to understand what’s most relevant to them. --- ## Best Practices Subheadings should: * Be used to explain and clearly label logical groups in existing sections of a page * Not be used without a parent heading * Not be used in tables or list items, such as for the primary content in a [resource list](/components/lists/resource-list) --- ## Content guidelines Subheadings should be: * Informative and descriptive: they should label the type of content grouped beneath them * Concise and scannable: * Use simple, clear language that can be read at a glance * Keep subheadings to single sentence and avoid using punctuation such as periods, commas, or semicolons * Write in sentence case (first word capitalized, the rest lowercase) <!-- usagelist --> #### Do - Shipping address #### Don’t - The package will be shipped to this address: <!-- end --> ## Examples ### Subheading in a card Use to structure content in a card. ```jsx <Subheading>Accounts</Subheading> ``` --- ## Related components * To learn how a card is structured to group similar concepts and tasks together, [use the card component](/components/structure/card) * To create a title for a card or top-level page section, [use the heading component](/components/titles-and-text/heading)