CTZN

Avatars

Size

Avatars come in different sizes…

<span class="avatar">
  <span class="size30" data-content="M"></span>
</span>
30 x 30 pixels
<span class="avatar">
  <span class="size100" data-content="M"></span>
</span>
100 x 100 pixels

Color

And colors…

<span class="avatar">
  <span class="clover" data-content="M"></span>
</span>
clover
<span class="avatar">
  <span class="kiwi" data-content="M"></span>
</span>
kiwi
<span class="avatar">
  <span class="grape" data-content="M"></span>
</span>
grape
<span class="avatar">
  <span class="bluebird" data-content="M"></span>
</span>
bluebird
<span class="avatar">
  <span class="cantaloupe" data-content="M"></span>
</span>
cantaloupe
<span class="avatar">
  <span class="cranberry" data-content="M"></span>
</span>
cranberry
<span class="avatar">
  <span class="amethyst" data-content="M"></span>
</span>
amethyst
<span class="avatar">
  <span class="sky" data-content="M"></span>
</span>
sky
<span class="avatar">
  <span class="ocean" data-content="M"></span>
</span>
ocean

Name

Add a “name” element if the avatar represents content (just like an “alt” attribute for an <img> element).

Àgus Echagüe 

<p>
  <a href="…">
    <span class="avatar">
      <span class="bluebird size100" data-content="À"></span>
      <span class="name">Àgus Echagüe</span>
    </span>
  </a>
</p>
In this example, the member’s avatar is used as a link. By adding a “name” element, the link will make more sense to software like search engines and screen readers.


Àgus Echagüe 

<p>
  <a href="…">
    <span class="avatar">
      <span class="bluebird size100" data-content="À"></span>
    </span><br />
    Àgus Echagüe
  </a>
</p>
In this example, the member’s name is presented next to the avatar, so a “name” element isn’t necessary.

You can make up new sizes

<span class="avatar">
  <span style="font-size: 10em; /* targetSize(240px) × ⅔ ÷ fontSize(16px) */" class="banana" data-content="M"></span>
</span>
240 x 240 pixels

And new colors

<span class="avatar">
  <span style="background-color: rgb(62, 197, 149);" class="size100" data-content="J"></span>
</span>
green-blue

Or use an image

Brian 
<span class="avatar">
  <img src="…" width="100" height="100" alt="" />
</span>
image

Or an icon

<span class="avatar">
  <span class="cantaloupe size100 has-icon" data-content="B">
    <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-user-circle"></use></svg>
  </span>
</span>
image

Examples

Posts

    jelena

    @workandprogress meeting Brandon of @broccolicity at #CTZN #CTZNmixer

    jelena

    @workandprogress meeting Brandon of @broccolicity at #CTZN #CTZNmixer

Profile

Jelena Woehr

Land cuttlefish. Word aficionado. Director of Community at GOOD.

Jelena Woehr

Land cuttlefish. Word aficionado. Director of Community at GOOD.