@planningcenter/avatardeprecated

A circular image representing one person.

Usage no npm install needed!

<script type="module">
  import planningcenterAvatar from 'https://cdn.skypack.dev/@planningcenter/avatar';
</script>

README

@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)

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