### Select Language

### Activity

- Team
- Projects
- Schedule

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Components Hub
- Avatars
- Accordions
  - Accordion
  - Collapse
  - Image Accordion
- Breadcrumb
- Calendar
- Dropdown
- Icon Box
- Loader
- Message
- Modal
- Progress
- Tabs
  - Regular Tabs
  - Slider Tabs
- Flex Table
  - Base Table
  - Compact Table
  - Media Table
  - Advanced Table
- Snacks
- Plugins
  - Alertify
  - Autocomplete
  - Datepicker
  - ChoicesJs
  - NoUI Slider
  - Filepond
  - Light Gallery
  - Video Gallery
  - Video Player
  - Toasts
  - WebUI Popover
- Rich Text
  - Summernote
  - Sun Editor

# Avatars

### Avatar

Huro Avatars are rounded images used for media and personal pages. Avatar sizes can be controled with css classes. Available modifier classes are `is-small`, `is-medium`, `is-large`, `is-big` and `is-xl`. See code for more details about usage.

          <div class="h-avatar is-small">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-medium">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-large">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-big">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-xl">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
          </div>

### Square Avatar

Avatars can have a square shape instead of a circle shape by adding the `is-squared` class to the target `.avatar` element. See code for more details about usage.

          <div class="h-avatar is-small">
              <img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar">
              <img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-medium">
              <img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-large">
              <img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-big">
              <img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-xl">
              <img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
          </div>

### Avatar Dot

Avatars can have a small dot attached to them, if you'd like to show a user status for example. Add the `has-dot` class to the target `.h-avatar` element. See code for more details about usage.

          <div class="h-avatar is-small has-dot">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar has-dot">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-medium has-dot">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-large has-dot">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-big has-dot">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-xl has-dot">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
          </div>

### Square Avatar Dot

Squared avatars can also have dots. Add the `has-dot` class to the target `.h-avatar` element, as well as the `has-dot-squared` class to the target `.h-avatar` parent element. See code for more details about usage.

          <div class="h-avatar is-small has-dot has-dot-squared">
              <img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar has-dot has-dot-squared">
              <img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-medium has-dot has-dot-squared">
              <img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-large has-dot has-dot-squared">
              <img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-big has-dot has-dot-squared">
              <img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-xl has-dot has-dot-squared">
              <img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
          </div>

### Avatar Dot Colors

Avatar dots can have different colors. Available modifier classes are `dot-primary`, `dot-info`, `dot-warning`, `dot-danger` and `dot-grey`. See code for more details about usage.

          <div class="h-avatar is-medium has-dot">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-medium has-dot dot-primary">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-medium has-dot dot-info">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-medium has-dot dot-warning">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-medium has-dot dot-danger">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
          </div>
          <div class="h-avatar is-medium has-dot dot-grey">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
          </div>

### Avatar Badges

Huro avatars can have badge images attached to them. Simply add a 1:1 ratio image with the `badge` class inside an `h-avatar` element.

          <div class="h-avatar is-small">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              <img class="badge" src="https://via.placeholder.com/150x150">
          </div>
          <div class="h-avatar">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              <img class="badge" src="https://via.placeholder.com/150x150">
          </div>
          <div class="h-avatar is-medium">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              <img class="badge" src="https://via.placeholder.com/150x150">
          </div>
          <div class="h-avatar is-large">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              <img class="badge" src="https://via.placeholder.com/150x150">
          </div>
          <div class="h-avatar is-big">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              <img class="badge" src="https://via.placeholder.com/150x150">
          </div>
          <div class="h-avatar is-xl">
              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              <img class="badge" src="https://via.placeholder.com/150x150">
          </div>

### Fake Avatar

When no default image is provided, you can use a fake avatar. Same size mofifiers are available. See the code examples for more details about usage.

JD
JD
JD
JD
JD
JD

          <div class="h-avatar is-small">
              <span class="avatar is-fake">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar">
              <span class="avatar is-fake">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-fake">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-large">
              <span class="avatar is-fake">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-big">
              <span class="avatar is-fake">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-xl">
              <span class="avatar is-fake">
                  <span>JD</span>
              </span>
          </div>

### Square Fake Avatar

Avatars can have a square shape instead of a circle shape by adding the `.is-squared` class to the target `.avatar` element. See code for more details about usage.

JD
JD
JD
JD
JD
JD

          <div class="h-avatar is-small">
              <span class="avatar is-fake">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar">
              <span class="avatar is-fake">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-fake">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-large">
              <span class="avatar is-fake">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-big">
              <span class="avatar is-fake">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-xl">
              <span class="avatar is-fake">
                  <span>JD</span>
              </span>
          </div>

### Fake Badges

When no default image is provided, you can use a fake avatar. Same size mofifiers are available. Fake avatars can also have badges. See the code examples for more details about usage.

JD
JD
JD
JD
JD
JD

          <div class="h-avatar is-small">
              <span class="avatar is-fake">
                  <span>JD</span>
              </span>
              <img class="badge" src="https://via.placeholder.com/150x150">
          </div>
          <div class="h-avatar">
              <span class="avatar is-fake">
                  <span>JD</span>
              </span>
              <img class="badge" src="https://via.placeholder.com/150x150">
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-fake">
                  <span>JD</span>
              </span>
              <img class="badge" src="https://via.placeholder.com/150x150">
          </div>
          <div class="h-avatar is-large">
              <span class="avatar is-fake">
                  <span>JD</span>
              </span>
              <img class="badge" src="https://via.placeholder.com/150x150">
          </div>
          <div class="h-avatar is-big">
              <span class="avatar is-fake">
                  <span>JD</span>
              </span>
              <img class="badge" src="https://via.placeholder.com/150x150">
          </div>
          <div class="h-avatar is-xl">
              <span class="avatar is-fake">
                  <span>JD</span>
              </span>
              <img class="badge" src="https://via.placeholder.com/150x150">
          </div>

### Fake Colors

Fake avatars can have different colors to break monotony. Available color classes are `is-primary`, `is-success`, `is-info`, `is-warning`, `is-danger`, `is-h-purple`, `is-h-orange`, `is-h-blue`, `is-h-green`, `is-h-red`, `is-h-yellow`. Supports dark mode.

JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD

          <div class="h-avatar is-medium">
              <span class="avatar is-fake">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-fake is-primary">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-fake is-success">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-fake is-info">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-fake is-warning">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-fake is-danger">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-fake is-purple">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-fake is-orange">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-fake is-blue">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-fake is-green">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-fake is-red">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-fake is-yellow">
                  <span>JD</span>
              </span>
          </div>

### Squared Fake Colors

Fake avatars can have different colors to break monotony. Available color classes are `is-primary`, `is-success`, `is-info`, `is-warning`, `is-danger`. Supports dark mode.

JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD

          <div class="h-avatar is-medium">
              <span class="avatar is-squared is-fake">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-squared is-fake is-primary">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-squared is-fake is-success">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-squared is-fake is-info">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-squared is-fake is-warning">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-squared is-fake is-danger">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-squared is-fake is-purple">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-squared is-fake is-orange">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-squared is-fake is-blue">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-squared is-fake is-green">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-fake is-red">
                  <span>JD</span>
              </span>
          </div>
          <div class="h-avatar is-medium">
              <span class="avatar is-fake is-yellow">
                  <span>JD</span>
              </span>
          </div>

### Small Stack

Huro avatars can be stacked in an slighlty overlaping line. Simply wrap your avatars inside an `avatar-stack` element. You can only use small, standard and medium avatars.

JD
CF
+2

          <div class="avatar-stack">
              <div class="h-avatar is-small">
                  <img class="avatar" src="https://via.placeholder.com/150x150"
                      alt="">
              </div>
              <div class="h-avatar is-small">
                  <span class="avatar is-fake is-info">
                      <span>JD</span>
                  </span>
              </div>
              <div class="h-avatar is-small">
                  <img class="avatar" src="https://via.placeholder.com/150x150"
                      alt="">
              </div>
              <div class="h-avatar is-small">
                  <img class="avatar" src="https://via.placeholder.com/150x150"
                      alt="">
              </div>
              <div class="h-avatar is-small">
                  <span class="avatar is-fake is-success">
                      <span>CF</span>
                  </span>
              </div>
              <div class="h-avatar is-small">
                  <span class="avatar is-more">
                      <span class="inner">
                          <span>+2</span>
                      </span>
                  </span>
              </div>
          </div>

### Standard Stack

Huro avatars can be stacked in an slighlty overlaping line. Simply wrap your avatars inside an `avatar-stack` element. You can only use small, standard and medium avatars.

JD
CF
+2

          <div class="avatar-stack">
              <div class="h-avatar">
                  <img class="avatar" src="https://via.placeholder.com/150x150"
                      alt="">
              </div>
              <div class="h-avatar">
                  <span class="avatar is-fake is-info">
                      <span>JD</span>
                  </span>
              </div>
              <div class="h-avatar">
                  <img class="avatar" src="https://via.placeholder.com/150x150"
                      alt="">
              </div>
              <div class="h-avatar">
                  <img class="avatar" src="https://via.placeholder.com/150x150"
                      alt="">
              </div>
              <div class="h-avatar">
                  <span class="avatar is-fake is-success">
                      <span>CF</span>
                  </span>
              </div>
              <div class="h-avatar">
                  <span class="avatar is-more">
                      <span class="inner">
                          <span>+2</span>
                      </span>
                  </span>
              </div>
          </div>

### Medium Stack

Huro avatars can be stacked in an slighlty overlaping line. Simply wrap your avatars inside an `avatar-stack` element. You can only use small, standard and medium avatars.

JD
CF
+2

          <div class="avatar-stack">
              <div class="h-avatar is-medium">
                  <img class="avatar" src="https://via.placeholder.com/150x150"
                      alt="">
              </div>
              <div class="h-avatar is-medium">
                  <span class="avatar is-fake is-info">
                      <span>JD</span>
                  </span>
              </div>
              <div class="h-avatar is-medium">
                  <img class="avatar" src="https://via.placeholder.com/150x150"
                      alt="">
              </div>
              <div class="h-avatar is-medium">
                  <img class="avatar" src="https://via.placeholder.com/150x150"
                      alt="">
              </div>
              <div class="h-avatar is-medium">
                  <span class="avatar is-fake is-success">
                      <span>CF</span>
                  </span>
              </div>
              <div class="h-avatar is-medium">
                  <span class="avatar is-more">
                      <span class="inner">
                          <span>+2</span>
                      </span>
                  </span>
              </div>
          </div>