UNPKG

@shopify/polaris

Version:

Shopify’s product component library

polaris.shopify.com/components

Shopify/polaris-react

114 lines (69 loc) • 3.09 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
--- name: Subheading category: Titles and text platforms: - android - ios - web keywords: - title bar - top-level - description - sub-section titles - titles of sub-sections - subsection titles - titles of subsections - android - ios --- # Subheading Subheadings are used for the title of any sub-sections in top-level page sections. --- ## 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](https://polaris.shopify.com/components/lists-and-tables/resource-list) --- ## Content guidelines Subheadings should follow the content guidelines for [headings and subheadings](https://polaris.shopify.com/content/actionable-language#section-headings-and-subheadings). --- ## Examples ### Typographic subheading Used for the title of any sub-sections in top-level page sections. ```jsx <Subheading>Accounts</Subheading> ``` <!-- content-for: android --> ![typographic subheading](/public_images/components/Subheading/android/default@2x.png) <!-- /content-for --> <!-- content-for: ios --> ![typographic subheading](/public_images/components/Subheading/ios/default@2x.png) <!-- /content-for --> --- ## Related components - To break up major sections of a page with a title, [use the heading component](https://polaris.shopify.com/components/titles-and-text/heading) --- ## Accessibility <!-- content-for: android --> See Material Design and development documentation about accessibility for Android: - [Accessible design on Android](https://material.io/design/usability/accessibility.html) - [Accessible development on Android](https://developer.android.com/guide/topics/ui/accessibility/) <!-- /content-for --> <!-- content-for: ios --> See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS: - [Accessible design on iOS](https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/accessibility/) - [Accessible development on iOS](https://developer.apple.com/accessibility/ios/) <!-- /content-for --> <!-- content-for: web --> A clear and consistent heading structure helps merchants who have difficulty with reading or language. It also helps screen reader users to navigate the page using keystrokes that are custom to their screen reader. Use the `element` prop to determine the specific HTML element that’s output for the subheading. The component defaults to a level 3 heading (`<h3>`). Use a different value for the `element` prop if a different subheading fits the context better. Learn more about writing helpful [headings and subheadings](https://polaris.shopify.com/content/actionable-language#section-headings-and-subheadings). <!-- usageblock --> #### Do Use subheadings to support the hierarchy and structure of the page. #### Don’t - Use subheadings for style alone. - Use subheadings for major sections of the page. <!-- end --> <!-- /content-for -->