- React
- HTML

## Examples

### Basic

### Bordered

### Small

### Medium

### Large

### Extra large

## 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-v6-c-avatar` | The alt attribute describes the appearance and function of the avatar image. Required

### Usage

Class | Applied to | Outcome
--- | --- | ---
`.pf-v6-c-avatar` | `<img>` | Initiates an avatar image. Required
`.pf-m-bordered` | `.pf-v6-c-avatar` | Modifies an avatar to have a border.
`.pf-m-sm{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be small on an optional breakpoint.
`.pf-m-md{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be medium on an optional breakpoint. Note: This is the default size.
`.pf-m-lg{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be large on an optional breakpoint.
`.pf-m-xl{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be extra large on an optional breakpoint.

##
CSS variables