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>