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

31 lines (18 loc) • 1.36 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
--- title: Avatar description: Use the avatar component to display a thumbnail representation of a person. keywords: ['image', 'thumbnail', 'profile', 'user', 'organization'] --- ![An image showing two different avatars, a circular and a square one.](https://user-images.githubusercontent.com/175638/234820833-c803cb11-2bc3-4597-88f3-2cf630a46702.png) ## Usage Use avatars to display a thumbnail that represents individuals in various contexts, such as testimonials, speaker sessions, blog post authors, and beyond. ## Options ### Size Avatar offers various sizes to fit different layout and visual scale needs. Sizes range from 32 to 80 pixels. Ensure the avatar is proportionate to its accompanying text. ![An image showing the size scale of the avatar component: 32, 40, 48, 64, and 80 pixels](https://user-images.githubusercontent.com/175638/234826575-1d1d5019-f714-41b1-b8bc-c0d312a46cfe.png) ### Shape Avatars appear as two different shapes: circle and square. The choice depends on the desired visual impression and the overall design aesthetic of your project. ![An image showing the two different shapes of the avatar component: circle and square](https://user-images.githubusercontent.com/175638/234827120-da548115-450b-4ec8-a6e6-5dcbe98e77c5.png) ## Related components - [Image](../Image/index.md) - [Testimonial](../Testimonial/index.md)