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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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>