UNPKG

@shopify/polaris

Version:

Shopify’s product component library

github.com/Shopify/polaris

Shopify/polaris

86 lines (53 loc) • 2.65 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
--- name: Thumbnail category: Images and icons keywords: - photo - picture - image - small thumbnail - medium thumbnail - large thumbnail - image preview --- # Thumbnail Use thumbnails as a visual anchor and identifier for an object. They should be used along with text to provide context. --- ## Purpose Put the merchant first by identifying the problem they face and the component that helps them solve it. ### Problem Merchants are scanning the page, orienting themselves or searching visually for a particular item. ### Solution Thumbnails provide a visual anchor and help structure the page. Because they are a visual representation, thumbnails make individual items identifiable at a glance. --- ## Best practices 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. --- ## 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](/principles/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: * `alt="Photo of {product}"`, e.g. "Photo of black t-shirt with cartoon tiger" * An empty `alt=""` attribute ignores the image in assistive technologies such as screen readers, and may be used on decorative thumbnails ## Examples ### Default thumbnail Use as the default size (medium). ```jsx <Thumbnail source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg" alt="Black choker necklace" /> ``` ### Small thumbnail 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" /> ``` --- ## Related components * To present a thumbnail representation of an individual or business in the interface, [use the avatar component](/components/images-and-icons/avatar)