UNPKG

@combine-labs/combine-polaris

Version:

Combine Lab's product component library. Forked from Shopify's Polaris.

github.com/Combine-Labs/combine-polaris

Combine-Labs/combine-polaris

95 lines (64 loc) • 2.02 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
--- 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 - card subheadings - card section headings - headings of card sections - card section subheadings - android - ios --- # 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 --- ## 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-and-tables/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> ``` <!-- content-for: android --> ![Subheading in a card](components/Subheading/android/default.png) <!-- /content-for --> <!-- content-for: ios --> ![Subheading in a card](components/Subheading/ios/default.png) <!-- /content-for --> --- ## 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)