Avatar
The avatar is used to represent a user. It may contain an image that represents the user or a placeholder graphic in the absence of an image. Typical usage is to represent the current user in the masthead. Related design guidelines: Masthead
ExamplesDocumentationCSS VariablesExamples
Documentation
Overview
The avatar component provides a default SVG icon. If an image is used it should be 36px by 36px.
Accessibility
| Attribute | Applied to | Outcome |
|---|---|---|
alt | .pf-c-avatar | The alt attribute specifies an alternate text for an image, if the image cannot be displayed. Required |
Usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-c-avatar | <img> | Initiates an avatar image. Required |
CSS Variables
| .pf-c-avatar | --pf-c-avatar--BorderRadius | 30em | ||
| .pf-c-avatar | --pf-c-avatar--Width | 2.25rem | ||
| .pf-c-avatar | --pf-c-avatar--Height | 2.25rem | ||
