Avatar

Add basic avatars to your site with the avatar component. Avatars extend the image component, and simply make the image round.

Basic

Avatars can be any size. Just add a size modifier like is-48x48 to the image component.

<a href="" class="image is-64x64 avatar">
	<img src="/path/to/image.jpg" alt="My photo">
</a>

Icon

You can optionally add an icon to an avatar to indicate a status, a favourite, etc...

<a href="" class="image is-64x64 avatar">
	<span class="icon is-16">
		<svg version="1.1" viewBox="0 0 16 16" role="img"><title>Star icon</title><g transform="translate(0, 0)"><path fill="#4fc9bb" d="M15.144,5.438l-4.316-0.627L8.897,0.9c-0.338-0.683-1.456-0.683-1.794,0l-1.93,3.911L0.856,5.438 C0.039,5.557-0.292,6.565,0.302,7.145l3.124,3.044l-0.737,4.299c-0.139,0.814,0.717,1.439,1.451,1.054L8,13.513l3.861,2.03 c0.728,0.381,1.591-0.234,1.451-1.054l-0.737-4.299l3.124-3.044C16.292,6.565,15.961,5.557,15.144,5.438z"></path></g></svg>
	</span>
	<img src="/path/to/image.jpg" alt="My photo">
</a>