Avatar
Usage
The avatar thumbnail is commonly used to represent a user in a masthead or navigation. However, depending on other use cases and needs, there is more room for customization.
Sizes
The avatar thumbnail can be used at different sizes based on our design tokens. The default size is 64px.
| Variation and range | Use case |
|---|---|
| Small (16px - 32px) | Use these sizes in accordions, data lists, or tables |
| Medium (40px - 80px) | Use these sizes in layouts, bands, or cards |
| Large (96px - 128px) | Use these sizes in profile displays or account interfaces |
Writing content
Separate each part of the job title and company name with a comma.
Layout
Alignment
The avatar thumbnail and job details text can be horizontally or vertically centered.
Stacking
There is 48px of space when avatar groups are stacked vertically.
Responsive design
Large breakpoints
Small breakpoints
Line breaks
As breakpoints or containers get smaller, regardless if job details text will break to more lines, it is still anchored at the top.
Best practices
Thumbnail shape
Do not change the shape of the avatar thumbnail.
Light theme thumbnail
Do not use a light theme avatar thumbnail in the dark theme.
Icon vs. avatar thumbnail
Do not use an avatar thumbnail when an icon is more suitable.
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
