Version 3.0.6

Users

User icons can be used to call attention to a profile or other user-related item. Each icon shows the user's initials on a colored circular background. You can specify a color for a user icon in two ways:

  • By explicitly attaching a color class, e.g. <span class="user-icon blue">EA</span>
  • By attaching a one-letter class, matching the user's first initial, e.g. <span class="user-icon e">EA</span>

The first letter of the user's first name is what determines the color to be used.

AA
BA
CA
DA
EA
FA
GA
HA
IA
JA
KA
LA
MA
NA
OA
PA
QA
RA
SA
TA
UA
VA
WA
XA
YA
ZA
                      
<i class="user-icon pink">AA</i>
<i class="user-icon green">BA</i>
<i class="user-icon indigo">CA</i>
<i class="user-icon lime">DA</i>
<i class="user-icon blue">EA</i>
<i class="user-icon green">FA</i>
<i class="user-icon amber">GA</i>
<i class="user-icon orange">HA</i>
<i class="user-icon orange-dark">IA</i>
<i class="user-icon purple">JA</i>
<i class="user-icon teal">KA</i>
<i class="user-icon cyan">LA</i>
<i class="user-icon purple-dark">MA</i>
<i class="user-icon n">NA</i>
<i class="user-icon o">OA</i>
<i class="user-icon p">PA</i>
<i class="user-icon q">QA</i>
<i class="user-icon r">RA</i>
<i class="user-icon s">SA</i>
<i class="user-icon t">TA</i>
<i class="user-icon u">UA</i>
<i class="user-icon v">VA</i>
<i class="user-icon w">WA</i>
<i class="user-icon x">XA</i>
<i class="user-icon y">YA</i>
<i class="user-icon z">ZA</i>

Users with active notifications will see a red bubble appear in the top right corner of their user icon.

AA9+
BA3
CA3
DA3
EA3
FA3
GA3
HA3
IA3
JA3
KA3
LA3
MA3
NA3
OA3
PA3
QA3
RA3
SA3
TA3
UA3
VA3
WA3
XA3
YA3
ZA3
                      
<i class="user-icon pink">AA
<span class="notification">9+<span>
</i>
<i class="user-icon green">BA
<span class="notification">3<span>
</i>
<i class="user-icon indigo">CA
<span class="notification">3<span>
</i>
<i class="user-icon lime">DA
<span class="notification">3<span>
</i>
<i class="user-icon blue">EA
<span class="notification">3<span>
</i>
<i class="user-icon green">FA
<span class="notification">3<span>
</i>
<i class="user-icon amber">GA
<span class="notification">3<span>
</i>
<i class="user-icon orange">HA
<span class="notification">3<span>
</i>
<i class="user-icon orange-dark">IA
<span class="notification">3<span>
</i>
<i class="user-icon purple">JA
<span class="notification">3<span>
</i>
<i class="user-icon teal">KA
<span class="notification">3<span>
</i>
<i class="user-icon cyan">LA
<span class="notification">3<span>
</i>
<i class="user-icon purple-dark">MA
<span class="notification">3<span>
</i>
<i class="user-icon orange">NA
<span class="notification">3<span>
</i>
<i class="user-icon teal">OA
<span class="notification">3<span>
</i>
<i class="user-icon lime">PA
<span class="notification">3<span>
</i>
<i class="user-icon purple">QA
<span class="notification">3<span>
</i>
<i class="user-icon orange-dark">RA
<span class="notification">3<span>
</i>
<i class="user-icon green">SA
<span class="notification">3<span>
</i>
<i class="user-icon amber">TA
<span class="notification">3<span>
</i>
<i class="user-icon pink">UA
<span class="notification">3<span>
</i>
<i class="user-icon blue">VA
<span class="notification">3<span>
</i>
<i class="user-icon cyan">WA
<span class="notification">3<span>
</i>
<i class="user-icon purple-dark">XA
<span class="notification">3<span>
</i>
<i class="user-icon indigo">YA
<span class="notification">3<span>
</i>
<i class="user-icon green">ZA
<span class="notification">3<span>
</i>

Use this styling to indicate that a user's information has changed or otherwise requires attention. If this is implemented along with plain user icons, make sure to offset those with the appropriate amount of padding so that the centers of the icons are aligned.

AA
BA
CA
DA
EA
FA
GA
HA
IA
JA
KA
LA
MA
NA
OA
PA
QA
RA
SA
TA
UA
VA
WA
XA
YA
ZA
                      
<i class="user-icon user-icon-halo pink">AA
<i class="user-icon user-icon-halo green">BA
<i class="user-icon user-icon-halo indigo">CA
<i class="user-icon user-icon-halo lime">DA
<i class="user-icon user-icon-halo blue">EA
<i class="user-icon user-icon-halo green">FA
<i class="user-icon user-icon-halo amber">GA
<i class="user-icon user-icon-halo orange">HA
<i class="user-icon user-icon-halo orange-dark">IA
<i class="user-icon user-icon-halo purple">JA
<i class="user-icon user-icon-halo teal">KA
<i class="user-icon user-icon-halo cyan">LA
<i class="user-icon user-icon-halo purple-dark">MA
<i class="user-icon user-icon-halo orange">NA
<i class="user-icon user-icon-halo teal">OA
<i class="user-icon user-icon-halo lime">PA
<i class="user-icon user-icon-halo purple">QA
<i class="user-icon user-icon-halo orange-dark">RA
<i class="user-icon user-icon-halo green">SA
<i class="user-icon user-icon-halo amber">TA
<i class="user-icon user-icon-halo pink">UA
<i class="user-icon user-icon-halo blue">VA
<i class="user-icon user-icon-halo cyan">WA
<i class="user-icon user-icon-halo purple-dark">XA
<i class="user-icon user-icon-halo indigo">YA
<i class="user-icon user-icon-halo green">ZA

Search Results

Powered by