@planningcenter/avatar NPM

`@planningcenter/avatar`

A circular image representing one person

Usage

npm -i @planningcenter/avatar

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)