UNPKG

@shopify/polaris

Version:

Shopify’s product component library

github.com/Shopify/polaris

Shopify/polaris

74 lines (53 loc) • 1.62 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
--- name: Caption category: Titles and text keywords: - labels - text - microcopy - typographic - graph - timestamp - smaller text - smallest text - smaller than reading size text - time text - compact text - small text --- # Caption Caption text size is smaller than the recommended size for general reading. It should be used only in a graph or as a timestamp in a list. --- ## Best practices - Use for secondary labels in graphs and charts - May be used for timestamps in lists of content - Don’t use this component for other cases - Don’t use this component for text longer than a few words - Don’t use this component for aesthetic effect or to break from the standard text size --- ## Content guidelines ### Captions Captions are primarily used in [data visualizations](/design/data-visualizations). Stick to a few words and don’t use this component for complete sentences or longer content. <!-- usagelist --> #### Do - Use caption for labelling data visualizations ![Diagram of using captions to label graphs and other data content](typography/display-styles/do-use-caption-for-labeling-data-visualizations.png) - Received April 21, 2017 #### Don’t - Order #1001 was received on April 21, 2017 - This is your recent activity <!-- end --> --- ## Examples ### Default caption Use to provide details in situations where content is compact and space is tight. ```jsx <List> <List.Item> Order #1001 <Caption>Received April 21, 2017</Caption> </List.Item> <List.Item> Order #1002 <Caption>Received April 22, 2017</Caption> </List.Item> </List> ```