UNPKG

@primer/react-brand

Version:

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

primer.style/brand

primer/brand

52 lines (29 loc) • 2.18 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
--- title: Image description: Use the image component to display a graphical representation. keywords: ['illustration', 'picture', 'screenshot'] --- ## Usage Use an image to display a graphical representation, such as a photograph or a visual illustration, on a web page. Use it in combination with text to provide context or additional information. **✅ Do** ![](https://github.com/primer/brand/assets/912236/3ffc80cb-4d7d-4ef4-b66f-10e902d8f17c) _Use an image to display a photograph in combination with descriptive text to provide context._ **❌ Don't** ![](https://github.com/primer/brand/assets/912236/6f29d849-9379-4327-a4aa-e1233e19861b) _Don't use an icon as an image or illustration._ ## Options ### Size Choose the appropriate dimensions for the image to fit the desired layout using the `width/height` or the `aspect-ratio` properties. Avoid using images that are too large or too small for their intended display. When using images in a list, make sure they are all the same size to achieve a visually balanced layout. **✅ Do** ![](https://github.com/primer/brand/assets/912236/7e9cf19c-1545-4b47-9ac8-0442050eb509) _In a list or group, use images of the same size and aspect ratio._ **❌ Don't** ![](https://github.com/primer/brand/assets/912236/6efc49d3-f982-4f9f-9951-413a05f329cc) _Don't use images of different sizes in the same section._ ## Accessibility Use the `alt` attribute to provide alternative text that is displayed if the image cannot be loaded or for accessibility purposes. It is important to include descriptive alternative text that conveys the meaning or content of the image. For more info, see [alternative text for images](https://primer.style/design/guides/accessibility/alternative-text-for-images). Optimize your images to reduce file size without compromising quality. Smaller file sizes improve page loading speed. ## Related components - [Card](../Card/index.md): to display navigational related content with higher visual weight. - [River](../River/index.md): To display a list of content items with a visual asset. - [Avatar](../Avatar/index.md): Use avatar to display a thumbnail representation of a person.