Avatars

Usage

Avatars are for displaying user initials (usually 1-2 letters).

/ user => User(id: 9, first_name: "John", last_name: "Doe")
.avatar.avatar-sm
  = avatar_image(user: user)

import { Avatar } from 'n2-styles'

function myComponent(props) {
  // props.user = { id: 9, first_name: "John", last_name: "Doe" };
  return (
    <Avatar user={props.user} />
  );
}

<div class="avatar-sm">
  <div class="rounded-circle skittles-avatar skittles-avatar-0" data-initials="JD" title="John Doe"></div>
</div>

Colors

Avatars come in nine colors, which can be set using the class skittles-avatar-N where N is an integer 0 thru 8.

If you use the Rails helper / React component, the color is chosen through an equation based on the user ID: user.id % 9

Sizes

Avatars come in 5 sizes: xs, sm, md, lg, and xl. The default size for the React component is sm.

.avatar.avatar-xs
  = avatar_image(user: user)
.avatar.avatar-sm
  = avatar_image(user: user)
.avatar.avatar-md
  = avatar_image(user: user)
.avatar.avatar-lg
  = avatar_image(user: user)
.avatar.avatar-xl
  = avatar_image(user: user)

import { Avatar } from 'n2-styles'

function avatarSizes(props) {
  return (
    <Avatar user={props.user} size="xs" />
    <Avatar user={props.user} size="sm" />
    <Avatar user={props.user} size="md" />
    <Avatar user={props.user} size="lg" />
    <Avatar user={props.user} size="xl" />
  );
}

<div class="avatar avatar-xs">
  <div class="rounded-circle skittles-avatar skittles-avatar-0" data-initials="JD" title="John Doe"></div>
</div>
<div class="avatar avatar-sm">
  <div class="rounded-circle skittles-avatar skittles-avatar-1" data-initials="JD" title="John Doe"></div>
</div>
<div class="avatar avatar-md">
  <div class="rounded-circle skittles-avatar skittles-avatar-2" data-initials="JD" title="John Doe"></div>
</div>
<div class="avatar avatar-lg">
  <div class="rounded-circle skittles-avatar skittles-avatar-3" data-initials="JD" title="John Doe"></div>
</div>
<div class="avatar avatar-xl">
  <div class="rounded-circle skittles-avatar skittles-avatar-4" data-initials="JD" title="John Doe"></div>
</div>

Images

If you provide an image URL, the image will be displayed instead of the user's initials with the colored background.

.avatar.avatar-lg
  = avatar_image(user: user, photo_attr: :photo)

import { Avatar } from 'n2-styles'

function imageAvatar(props) {
  return (
    <Avatar user={props.user} image_url="https://placekitten.com/200/200" size="lg" />
  );
}

<div class="avatar avatar-lg">
  <img src="https://placekitten.com/200/200" alt="John Doe" title="John Doe" class="rounded-circle img-fluid">
</div>