Avatar

The .avatar class turns an image into a circle, giving it a 1:1 aspect ratio and a 50% border radius.

<img 
	class="avatar" 
	alt="A headshot of..."
	src="../chris.jpg" 
	width="175" 
	height="175"
>

Install

The .avatar class is included in kelp.css.

If you’re installing components individually, load the /css/components/avatar.css file.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/kelpui@0/css/components/avatar.css">