Avatars - Components - Spectre.css CSS Framework
Author: Yan Zhu
Description: Avatars are user profile pictures. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.

PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Avatars#

Avatars are user profile pictures.

Add the `avatar` class to <img> element. There are 4 additional sizes available, including `avatar-xl`(64px), `avatar-lg`(48px), `avatar-sm`(24px), and `avatar-xs`(16px). By default, the avatar size is 32px.

For users who don't have profile pictures, you may use their initials for avatars. Add the `avatar` class and avatar size class to <div> element. The `data-initial` attribute is the name appear inside the avatar.

    <!-- Basic avatar examples -->
    <figure class="avatar avatar-xl">
      <img src="img/avatar-1.png" alt="...">
    </figure>

    <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure>

    <!-- Show initals when avatar image is unavailable or not fully loaded -->
    <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;">
      <img src="img/avatar-1.png" alt="...">
    </figure>

#### Avatar icons#

    <figure class="avatar avatar-xl">
      <img src="img/avatar-1.png" alt="...">
      <img src="img/avatar-5.png" class="avatar-icon" alt="...">
    </figure>

#### Avatar presence#

Avatars support presence indicators. You can add an <i> element with the `avatar-presence` class, and add `online`, `busy` or `away` class for different status colors. The default is gray which means offline.

    <figure class="avatar avatar-xl">
      <img src="img/avatar-1.png" alt="...">
      <i class="avatar-presence online"></i>
    </figure>

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.