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.
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 |
Separate each part of the job title and company name with a comma.
The avatar thumbnail and job details text can be horizontally or vertically centered.
There should be a spacing of --rh-space-3xl between avatar groups that are stacked vertically.
As breakpoints or containers get smaller, regardless if job details text will break to more lines, it is still anchored at the top.
Keep the thumbnail in a circle.
Do not change the shape of the avatar thumbnail.
Use the right avatar thumbnail for the theme.
Do not use a light theme avatar thumbnail in the dark theme and vice versa.
Use an avatar thumbnail to represent an authenticated user.
Do not use an avatar thumbnail when an icon is more suitable.