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

Tags

Huro offers a tag component than can be customized to fit any needs. Tags can have multiple colors. Available modifier classes are is-primary, is-info, is-success, is-warning, is-danger, is-light, is-white, is-solid.

Default Light White Solid Primary Info Success Warning Danger Orange Blue Green Purple

            <span class="tag">Default</span>
            <span class="tag is-light">Light</span>
            <span class="tag is-white">White</span>
            <span class="tag is-solid">Solid</span>
            <span class="tag is-primary">Primary</span>
            <span class="tag is-info">Info</span>
            <span class="tag is-success">Success</span>
            <span class="tag is-warning">Warning</span>
            <span class="tag is-danger">Danger</span>
            <span class="tag is-orange">Orange</span>
            <span class="tag is-blue">Blue</span>
            <span class="tag is-green">Green</span>
            <span class="tag is-purple">Purple</span>
            

Rounded Tags

Huro tags can have rounded edges. Use the is-rounded modifier class on a tag element to apply a rounded style. See the code examples for more details about usage.

Default Light White Solid Primary Info Success Warning Danger Orange Blue Green Purple

            <span class="tag is-rounded">Default</span>
            <span class="tag is-rounded is-light">Light</span>
            <span class="tag is-rounded is-white">White</span>
            <span class="tag is-rounded is-solid">Solid</span>
            <span class="tag is-rounded is-primary">Primary</span>
            <span class="tag is-rounded is-info">Info</span>
            <span class="tag is-rounded is-success">Success</span>
            <span class="tag is-rounded is-warning">Warning</span>
            <span class="tag is-rounded is-danger">Danger</span>
            <span class="tag is-rounded is-orange">Orange</span>
            <span class="tag is-rounded is-blue">Blue</span>
            <span class="tag is-rounded is-green">Green</span>
            <span class="tag is-rounded is-purple">Purple</span>
            

Outlined Tags

Huro tags can have an outlined style. Use the is-outlined modifier class on a tag element to apply an outlined style. See the code examples for more details about usage.

Primary Info Success Warning Danger Orange Blue Green Purple

            <span class="tag is-rounded is-primary is-outlined">Primary</span>
            <span class="tag is-rounded is-info is-outlined">Info</span>
            <span class="tag is-rounded is-success is-outlined">Success</span>
            <span class="tag is-rounded is-warning is-outlined">Warning</span>
            <span class="tag is-rounded is-danger is-outlined">Danger</span>
            <span class="tag is-rounded is-orange is-outlined">Orange</span>
            <span class="tag is-rounded is-blue is-outlined">Blue</span>
            <span class="tag is-rounded is-green is-outlined">Green</span>
            <span class="tag is-rounded is-purple is-outlined">Purple</span>
            

Light Colors

Huro tags can have light background colors. Use the is-light modifier class on a solid color tag element to apply an light style. See the code examples for more details about usage.

Primary Info Success Warning Danger

            <span class="tag is-rounded is-primary is-light">Primary</span>
            <span class="tag is-rounded is-info is-light">Info</span>
            <span class="tag is-rounded is-success is-light">Success</span>
            <span class="tag is-rounded is-warning is-light">Warning</span>
            <span class="tag is-rounded is-danger is-light">Danger</span>
            

Elevated Tags

Huro tags can be elevated. Use the is-elevated modifier class on a solid color tag element to apply an elevated style. See the code examples for more details about usage.

Default Solid Primary Info Success Warning Danger Orange Blue Green Purple

            <span class="tag is-rounded is-elevated">Default</span>
            <span class="tag is-rounded is-solid is-elevated">Solid</span>
            <span class="tag is-rounded is-primary is-elevated">Primary</span>
            <span class="tag is-rounded is-info is-elevated">Info</span>
            <span class="tag is-rounded is-success is-elevated">Success</span>
            <span class="tag is-rounded is-warning is-elevated">Warning</span>
            <span class="tag is-rounded is-danger is-elevated">Danger</span>
            <span class="tag is-rounded is-orange is-elevated">Orange</span>
            <span class="tag is-rounded is-blue is-elevated">Blue</span>
            <span class="tag is-rounded is-green is-elevated">Green</span>
            <span class="tag is-rounded is-purple is-elevated">Purple</span>
            

Tag Addons

Huro tags can be merged into a single one to achieve addon styles. You can attach another tag or a delete button if you need to. See the code example for more details about usage.

Package Bulma
John Maynard

            <div class="tags has-addons">
                <span class="tag">Package</span>
                <span class="tag is-primary">Bulma</span>
            </div>
            <div class="tags has-addons">
                <span class="tag is-primary">John Maynard</span>
                <a class="tag is-delete"></a>
            </div>
            

Tag List

Huro tag adons can be organized in an inline tag list. You can use it to build a custom tag input for example. See the code examples for more details about usage.


            <div class="field is-grouped is-grouped-multiline">
                <div class="control">
                    <div class="tags has-addons">
                        <a class="tag is-warning">javascript</a>
                        <a class="tag is-delete"></a>
                    </div>
                </div>
            
                <div class="control">
                    <div class="tags has-addons">
                        <a class="tag is-danger">CSS</a>
                        <a class="tag is-delete"></a>
                    </div>
                </div>
            
                <div class="control">
                    <div class="tags has-addons">
                        <a class="tag is-info">React</a>
                        <a class="tag is-delete"></a>
                    </div>
                </div>
            
                <div class="control">
                    <div class="tags has-addons">
                        <a class="tag is-success">Nodejs</a>
                        <a class="tag is-delete"></a>
                    </div>
                </div>
            
                <div class="control">
                    <div class="tags has-addons">
                        <a class="tag is-dark">Deno</a>
                        <a class="tag is-delete"></a>
                    </div>
                </div>
            
                <div class="control">
                    <div class="tags has-addons">
                        <a class="tag is-info">Docker</a>
                        <a class="tag is-delete"></a>
                    </div>
                </div>
            
                <div class="control">
                    <div class="tags has-addons">
                        <a class="tag is-primary">Kubernetes</a>
                        <a class="tag is-delete"></a>
                    </div>
                </div>
            </div>