Select Language

Activity

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

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>