@planningcenter/avatar

A circular image representing one person

Usage

npm -i @planningcenter/avatar

• NPM
• UNPKG

React

import Avatar from "@planningcenter/avatar";
import "@planningcenter/avatar.css";

<Avatar
  src="path/to/avatar.png"
  alt="some avatar"
  size={4}
  inset={true}
/>;

CSS

First, link the stylesheet, relative to your platform.

<span class="Avatar Avatar--size_4 Avatar--inset_true">
  <img src="path/to/avatar.png" alt="some avatar" />
</span>

Properties

size: string | number

Controls size in 8px increments.

values: 3, 4, 5, 6, 7, 8, 9, "20px", "profile"

inset: boolean

Insets the component

Theming with CSS Custom Properties

:root {
  --planningcenter-avatar-inset-color: white;
}

Specification

Definition

An image representing one person.

Treatment

• Shape: circle
• Dimensions: height == width
• Border: optional
  • excluded: 20px
  • size: .5 * (absolute-avatar-size / 8px) (rounded up for better browser support)
  • scale: _roundUp(size _ .05)*
  • min: 2px
  • max: 5px
  • position: inside
  • color: variable (default: white)

Size

Absolute height/width must be a multiple of 8px, with a single exception for 20px.

Applications may choose to implement a subset of standard sizes.

standard sizes:

• 20px
• 24px
• 32px
• 40px
• 48px
• 56px
• 64px
• 72px