View Demo Buy Now Our Portfolio

Navigation Style

Horizontal Left-menu

Skin Modes

Default Mode
White Mode
Dark Mode

Header Styles Mode

Light Menu
Dark Menu
Color Menu
Graident Menu
Left-menu Bg-Image

Leftmenu Styles Mode

Light Menu
Dark Menu
Color Menu
Gradient-Color Menu
Loader
logo
View all Notification
3
See all Messages
img
English
flag-img
French
flag-img
Germany
flag-img
Italy
flag-img
Russia
flag-img
Spain
profile-user
Jacob Fisher
My Profile Edit Profile Account Settings Inbox Message Need help? Sign out

Tags

  1. Elements
  2. Tags
Add Order Add User

Default tag

First tag Second tag Third tag 
<div class="tags">
    <span class="tag">First tag</span>
    <span class="tag">Second tag</span>
    <span class="tag">Third tag</span>
</div>

Link tag

First tag Second tag Third tag 
<div class="tags">
    <a href="#" class="tag">First tag</a>
    <a href="#" class="tag">Second tag</a>
    <a href="#" class="tag">Third tag</a>
</div>

Rounded tag

First tag Second tag Third tag 
<div class="tags">
    <span class="tag tag-rounded">First tag</span>
    <span class="tag tag-rounded">Second tag</span>
    <span class="tag tag-rounded">Third tag</span>
</div>

Color tag

Blue tag Azure tag Indigo tag Purple tag Pink tag Red tag Orange tag Yellow tag Lime tag Green tag Teal tag Cyan tag Gray tag Dark gray tag 
<div class="tags">
    <span class="tag tag-blue">Blue tag</span>
    <span class="tag tag-azure">Azure tag</span>
    <span class="tag tag-indigo">Indigo tag</span>
    <span class="tag tag-purple">Purple tag</span>
    <span class="tag tag-pink">Pink tag</span>
    <span class="tag tag-red">Red tag</span>
    <span class="tag tag-orange">Orange tag</span>
    <span class="tag tag-yellow">Yellow tag</span>
    <span class="tag tag-lime">Lime tag</span>
    <span class="tag tag-green">Green tag</span>
    <span class="tag tag-teal">Teal tag</span>
    <span class="tag tag-cyan">Cyan tag</span>
    <span class="tag tag-gray">Gray tag</span>
    <span class="tag tag-gray-dark">Dark gray tag</span>
</div>

Avatar tag

Victoria Nathan Alice Rose Peter Wayne Michelle Debra 
<div class="tags">
<span class="tag">
    <span class="tag-avatar avatar cover-image" data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark/assets/images/users/11.jpg"></span>
    Victoria
</span>
<span class="tag">
    <span class="tag-avatar avatar cover-image" data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark/assets/images/users/4.jpg"></span>
    Nathan
</span>
<span class="tag">
    <span class="tag-avatar avatar cover-image" data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark/assets/images/users/1.jpg"></span>
    Alice
</span>
<span class="tag">
    <span class="tag-avatar avatar cover-image" data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark/assets/images/users/18.jpg"></span>
    Rose
</span>
<span class="tag">
    <span class="tag-avatar avatar cover-image" data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark/assets/images/users/16.jpg"></span>
    Peter
</span>
<span class="tag">
    <span class="tag-avatar avatar cover-image" data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark/assets/images/users/6.jpg"></span>
    Wayne
</span>
<span class="tag">
    <span class="tag-avatar avatar cover-image" data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark/assets/images/users/7.jpg"></span>
    Michelle
</span>
<span class="tag">
    <span class="tag-avatar avatar cover-image" data-image-src="https://laravel.spruko.com/yoha/Sidemenu-Icon-Dark/assets/images/users/17.jpg"></span>
    Debra
</span>
</div>

List of tags

You can create a list of tags with the .tags container.

First tag Second tag Third tag 
<div class="tags">
    <span class="tag">First tag</span>
    <span class="tag">Second tag</span>
    <span class="tag">Third tag</span>
</div>

If the list is very long, it will automatically wrap on multiple lines, while keeping all tags evenly spaced.

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty 
<div class="tags">
    <span class="tag">One</span>
    <span class="tag">Two</span>
    <span class="tag">Three</span>
    <span class="tag">Four</span>
    <span class="tag">Five</span>
    <span class="tag">Six</span>
    <span class="tag">Seven</span>
    <span class="tag">Eight</span>
    <span class="tag">Nine</span>
    <span class="tag">Ten</span>
    <span class="tag">Eleven</span>
    <span class="tag">Twelve</span>
    <span class="tag">Thirteen</span>
    <span class="tag">Fourteen</span>
    <span class="tag">Fifteen</span>
    <span class="tag">Sixteen</span>
    <span class="tag">Seventeen</span>
    <span class="tag">Eighteen</span>
    <span class="tag">Nineteen</span>
    <span class="tag">Twenty</span>
</div>

Tag remove

One Two Three Four 
<div class="tags">
    <span class="tag">
        One
        <a href="javascript:void(0)" class="tag-addon"><i class="fe fe-x"></i></a>
    </span>
    <span class="tag">
        Two
        <a href="javascript:void(0)" class="tag-addon"><i class="fe fe-x"></i></a>
    </span>
    <span class="tag">
        Three
        <a href="javascript:void(0)" class="tag-addon"><i class="fe fe-x"></i></a>
    </span>
    <span class="tag">
        Four
        <a href="javascript:void(0)" class="tag-addon"><i class="fe fe-x"></i></a>
    </span>
</div>

Tag addons

npm
npm
bundle passing
CSS gzip size 20.9 kB 
<div class="tags">
    <div class="tag">
        npm
        <a href="#" class="tag-addon"><i class="fe fe-x"></i></a>
    </div>
    <div class="tag tag-danger">
        npm
        <span class="tag-addon"><i class="fe fe-activity"></i></span>
    </div>
    <div class="tag">
        bundle
        <span class="tag-addon tag-success">passing</span>
    </div>
    <span class="tag tag-dark">
        CSS gzip size
        <span class="tag-addon tag-warning">20.9 kB</span>
    </span>
</div>
General Settings
Notifications
Show your emails
Show Task statistics
Show recent activity
System Logs
Error Reporting
Show your status to all
Keep up to date
Overview

Achieves80%

Projects60%

Earnings50%

Balance45%

Toatal Profits75%

Total Likes70%