Ssstyles › Avatar

Source

This component will display an avatar or profile picture.

# Image avatar

You can display a profile picture like this:

<img
	data-avatar
	src="https://randomuser.me/api/portraits/lego/1.jpg"
	alt="Guy-Manuel de Homem Christo's profile picture"
>

# Linked avatar

Linking to a profile page gets you a hover style:

<a href="#thomas-bangaltar"
	><img data-avatar src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Thomas Bangaltar's profile picture"
></a>

# Text avatar

No profile picture? Go with initial instead:

<a href="#leonard-cohen"><span data-avatar aria-title="Leonard Cohen">LC</span></a>

LC

# Grouped avatars

Putting avatars in a group will display them in a stacked list:

<div data-group>
	<a href="#mike-shinoda">
		<img data-avatar src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Mike Shinoda's profile picture">
	</a>
	<a href="#brad-delson">
		<img data-avatar src="https://randomuser.me/api/portraits/lego/2.jpg" alt="Brad Delson's profile picture">
	</a>
	<a href="#dave-farrell">
		<img data-avatar src="https://randomuser.me/api/portraits/lego/3.jpg" alt="Dave Phoenix Farrell's profile picture">
	</a>
	<a href="#joe-hahn">
		<img data-avatar src="https://randomuser.me/api/portraits/lego/2.jpg" alt="Joe Hahn's profile picture">
	</a>
	<a href="#rob-bourdon">
		<img data-avatar src="https://randomuser.me/api/portraits/lego/2.jpg" alt="Rob Bourdon's profile picture">
	</a>
	<a href="#chester-bennington"><span data-avatar aria-title="Chester Bannington">CB</span></a>
</div>

CB

<div data-group="vertical">
	<a href="#lou-watts">
		<img data-avatar src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Lou Watts's profile picture">
	</a>
	<a href="#boff-whalley">
		<img data-avatar src="https://randomuser.me/api/portraits/lego/2.jpg" alt="Boff Whalley's profile picture">
	</a>
	<a href="#neil-ferguson">
		<img data-avatar src="https://randomuser.me/api/portraits/lego/3.jpg" alt="Neil Ferguson's profile picture">
	</a>
	<a href="#jode-abbott">
		<img data-avatar src="https://randomuser.me/api/portraits/lego/2.jpg" alt="Jude Abbott's profile picture">
	</a>
	<a href="#phil-moody">
		<img data-avatar src="https://randomuser.me/api/portraits/lego/2.jpg" alt="Phil Moody's profile picture">
	</a>
</div>