UNPKG

@hackplan/polaris

Version:

Shopify’s product component library

github.com/Shopify/polaris-react

Shopify/polaris-react

124 lines (83 loc) • 3.38 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
115
116
117
118
119
120
121
122
123
124
--- name: Thumbnail category: Images and icons platforms: - android - ios - web keywords: - photo - picture - image - small thumbnail - medium thumbnail - large thumbnail - image preview - android - ios --- # Thumbnail Use thumbnails as a visual anchor and identifier for an object. They should be used along with text to provide context. --- ## Best practices On web, thumbnails should: - Be one of 3 sizes: - Small (40 × 40 px): use when the medium size is too large for the layout, or when the thumbnail has less importance. - Medium (60 × 60 px): use as the default size. - Large (80 × 80 px): use when an thumbnail is a major focal point. Avoid this size in lists of like items. On Android and iOS, thumbnails should: - Be one of 2 sizes: - Default (40 × 40): use as the default size. - Large (72 × 72): use when an thumbnail is a major focal point. Avoid this size in lists of like items. --- ## Content guidelines Any time you use an image to communicate a concept on Shopify, it’s important to use descriptive [alt text](/content/alternative-text). Doing this is important for [accessibility](/patterns-and-guides/accessibility) because it allows screen readers to describe what’s in the image to people who may not be able to see it. For thumbnails, we recommend using a format that describes what will show in the image: - On web, `alt="Photo of {product}"`. For example, “Photo of black t-shirt with cartoon tiger”. - On web, an empty `alt=""` attribute ignores the image in assistive technologies such as screen readers, and may be used on decorative thumbnails. - On iOS, `imageView.accessibilityLabel = "Photo of {product}"`. For example, “Photo of black t-shirt with cartoon tiger”. - On Android, `android:contentDescription="Photo of {product}"`. For example, “Photo of black t-shirt with cartoon tiger”. --- ## Examples ### Default thumbnail Use as the default size. ```jsx <Thumbnail source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg" alt="Black choker necklace" /> ``` <!-- content-for: android --> ![Default thumbnail](/public_images/components/Thumbnail/android/default@2x.png) <!-- /content-for --> <!-- content-for: ios --> ![Default thumbnail](/public_images/components/Thumbnail/ios/default@2x.png) <!-- /content-for --> ### Small thumbnail <!-- example-for: web --> Use when the default size is too large for the layout, or when the thumbnail has less importance. ```jsx <Thumbnail source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg" size="small" alt="Black choker necklace" /> ``` ### Large thumbnail Use when a thumbnail is a major focal point. Avoid this size in lists of like items. ```jsx <Thumbnail source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg" size="large" alt="Black choker necklace" /> ``` <!-- content-for: android --> ![Large thumbnail](/public_images/components/Thumbnail/android/large@2x.png) <!-- /content-for --> <!-- content-for: ios --> ![Large thumbnail](/public_images/components/Thumbnail/ios/large@2x.png) <!-- /content-for --> --- ## Related components - To present a thumbnail representation of an individual or business in the interface, [use the avatar component](/components/images-and-icons/avatar)