Avatar

Image and initials

<div class="flex items-center gap-4">
	{ui avatar,
		src: p('favicon')->file('favicon-96x96.png')->url(),
		alt: 'Phlat logo',
	/}
	{ui avatar, initials: 'AL' /}
</div>

src is a URL, so a page's file is p('page')->file('photo.jpg')->url(). The image keeps a square ratio and crops to fill, so any photo fits the circle. Without src the initials show on a muted fill, upper-cased. Set alt when the avatar stands alone, and leave it empty when the person's name is written beside it.

Sizes

SM MD LG

<div class="flex items-center gap-4">
	{ui avatar, initials: 'SM', size: 'sm' /}
	{ui avatar, initials: 'MD' /}
	{ui avatar, initials: 'LG', size: 'lg' /}
</div>

The size is the width and height, set by --avatar-size. Like a button, size has both spellings: the param for a fixed size, and the class avatar-lg when it changes by breakpoint. The initials scale with it.

Beside a name

Ada Lovelace

Editor

<div class="flex items-center gap-3">
	{ui avatar, initials: 'AL' /}
	<div>
		<p class="font-medium">Ada Lovelace</p>
		<p class="text-muted-foreground">Editor</p>
	</div>
</div>

Param	Default	Description
src	null	the image URL; without it the initials show
alt	''	the image's alt text, empty when the name is shown beside it
initials	''	shown when there is no src, e.g. AL
size	null	sm or lg
class	''	added to avatar
attrs	[]	any other attributes, e.g. ['id' => 'me']

Params