Avatar Element
The Avatar element is used to represent people or entities with circular or custom-rounded frames, supporting various sizes and image fitting modes.
Live Preview
Avatar Preview
Specifications
The Avatar element provides a range of visual styles for profile images:
- Sizing: Choose from SM, MD, LG, XL, or Full scaling presets.
- Corner Styles: While typically circular, corner rounding can be adjusted to match the site's brand via theme variables.
- Fallback UI: Avatars include built-in fallback backgrounds for missing or loading image assets.
- Accessibility: Always include an ALT text to ensure that your UI remains screen-reader friendly.
- Styling: Add custom borders, rings, or entrance animations like fade-in.
AI Guidance
How to prompt for Avatars:
- Add a large user profile avatar with a blue border.
- Create a group of three small circular avatars.
- Insert a medium-sized avatar that fades in when the page loads.