Avatars

Summary

User and project images in seven fixed sizes. The layout matches AUI exactly (inline-block container, table-cell inner) so consumer markup that nests extra content inside the avatar keeps working; Neura-native markup may omit the inner wrapper and let the image fill the box.

When to use

Class	Size
`.neura-avatar-xsmall`	16 px (dense lists, header menus)
`.neura-avatar-small`	24 px
`.neura-avatar-medium`	32 px
`.neura-avatar-large`	48 px
`.neura-avatar-xlarge`	64 px
`.neura-avatar-xxlarge`	96 px - profile pages (rounder corners)
`.neura-avatar-xxxlarge`	128 px (rounder corners)
`.neura-avatar-project`	Modifier: circular style (with a hairline ring) for project/app marks

Next to links in the application header, avatars align to the top of the link text automatically, and the -xsmall / -small sizes get small negative vertical margins so they don't stretch the header bar.

Examples

User avatars

Individuals are rounded-square, in seven fixed sizes:

Project avatars

Add neura-avatar-project for projects, spaces, and repositories - circular (with a hairline ring) to clearly differentiate them from user avatars:

HTML

Markup (the inner wrapper is required when nesting extra content):

<span class="neura-avatar neura-avatar-medium">
  <span class="neura-avatar-inner">
    <img src="/img/avatar.svg" alt="Tomas">
  </span>
</span>

Every size from the example above (only the size class changes):

<span class="neura-avatar neura-avatar-xsmall"><span class="neura-avatar-inner"><img src="/img/avatar.svg" alt=""></span></span>
<span class="neura-avatar neura-avatar-small"><span class="neura-avatar-inner"><img src="/img/avatar.svg" alt=""></span></span>
<span class="neura-avatar neura-avatar-medium"><span class="neura-avatar-inner"><img src="/img/avatar.svg" alt=""></span></span>
<span class="neura-avatar neura-avatar-large"><span class="neura-avatar-inner"><img src="/img/avatar.svg" alt=""></span></span>
<span class="neura-avatar neura-avatar-xlarge"><span class="neura-avatar-inner"><img src="/img/avatar.svg" alt=""></span></span>
<span class="neura-avatar neura-avatar-xxlarge"><span class="neura-avatar-inner"><img src="/img/avatar.svg" alt=""></span></span>
<span class="neura-avatar neura-avatar-xxxlarge"><span class="neura-avatar-inner"><img src="/img/avatar.svg" alt=""></span></span>

Project avatar: add the neura-avatar-project modifier (any size):

<span class="neura-avatar neura-avatar-project neura-avatar-xlarge">
  <span class="neura-avatar-inner">
    <img src="/img/project.svg" alt="">
  </span>
</span>

AUI compatibility

Full parity, including the inline-block/table-cell layout: existing consumer markup that nests extra content inside the avatar (e.g. a notice below the image) keeps flowing exactly as it did under AUI. CSS-only.