Avatar
Sourcecomponents/Avatar.astro
Sizes
A person’s picture. Five sizes — 28 to 72px. Circle by default.
xs · sm · md · lg · xl 
Fallback
With no src, the avatar shows initials from name on a soft accent tint.
Initials
PN AZ AZ
Shape
Circle for people; rounded for a squared team-tile look.
circle · rounded
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
src | string | — | Image URL. Omit to show the initials fallback. |
name | string | — | Alt text, and the source of the initials. |
initials | string | from name | Override the derived initials. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | 28 · 36 · 44 · 56 · 72px. |
shape | 'circle' | 'rounded' | 'circle' | Round, or a rounded square. |
Usage
Used in Testimonial cards and anywhere a person appears.
<Avatar src="/img/person.jpg" name="Person Name" />
<!-- No image → initials fallback -->
<Avatar name="Person Name" size="lg" />
<!-- Rounded-square, e.g. team tiles -->
<Avatar src="/img/person.jpg" name="Person Name" shape="rounded" size="xl" />Rules
Do
Always pass name — it’s the alt text and the fallback initials.
Use a square-ish source image so the crop reads well.
Don't
Stretch a non-square image — it always crops to the shape.
Mix circle and rounded avatars in the same row.