Paper User Picture

paper-userpicture lets you create user avatars. If user doesn't have picture set, we'll automatically create placeholder containing user name initials.

Styling

Custom property	Description	Default
--paper-userpicture-size	The size of picture	5em
--paper-userpicture-text-size	The font-size of the placeholder initials	calc(var(--paper-userpicture-size) / 2)

Demos

Basic example

<paper-userpicture user-id="AAA" user-name="Petja"></paper-userpicture>
<paper-userpicture user-id="BBB" user-name="Oliver"></paper-userpicture>
<paper-userpicture user-id="CCC" user-name="Luke"></paper-userpicture>
<paper-userpicture user-id="DDD" user-name="Yusef"></paper-userpicture>

Show names under pictures

<paper-userpicture user-id="EEE" user-name="Henry"></paper-userpicture>
<paper-userpicture user-id="FFF" user-name="Thomas"></paper-userpicture>
<paper-userpicture user-id="GGG" user-name="Michael"></paper-userpicture>
<paper-userpicture user-id="HHH" user-name="Leo"></paper-userpicture>

Use real user picture

<paper-userpicture image="http://lorempixel.com/160/160?1" user-id="III" user-name="Henry"></paper-userpicture>
<paper-userpicture image="http://lorempixel.com/160/160?2" user-id="JJJ" user-name="Thomas"></paper-userpicture>
<paper-userpicture image="http://lorempixel.com/160/160?3" user-id="KKK" user-name="Michael"></paper-userpicture>
<paper-userpicture image="http://lorempixel.com/160/160?4" user-id="LLL" user-name="Leo"></paper-userpicture>