Uplor logo
img
English
flag-img
French
flag-img
Germany
flag-img
Italy
flag-img
Russia
flag-img
Spain
4
You have 4 notification
2 new Messages
17:50 Pm
1 Event Soon
19-10-2018
3 new Comments
05:34 Am
Application Error
13:45 Pm
See all Notification
3
avatar-img
BlakeI've finished it! See you so.......
30 mins ago
avatar-img
CarolineJust see the my Admin....
12 mins ago
avatar-img
JonathanHi! I'am singer......
1 hour ago
avatar-img
EmilyJust a reminder that you have......
45 mins ago
View all Messages
View all
profile-img
My ProfileInboxAccount SettingsLog out

Tags

  1. Elements
  2. Tags

Default tag

First tagSecond tagThird tag 
<spanclass="tag">First tag</span><spanclass="tag">Second tag</span><spanclass="tag">Third tag</span>

Link tag

First tagSecond tagThird tag 
<ahref="#"class="tag">First tag</a><ahref="#"class="tag">Second tag</a><ahref="#"class="tag">Third tag</a>

Rounded tag

First tagSecond tagThird tag 
<spanclass="tag tag-rounded">First tag</span><spanclass="tag tag-rounded">Second tag</span><spanclass="tag tag-rounded">Third tag</span>

Avatar tag

Victoria Nathan Alice Rose Peter Wayne Michelle Debra 
<spanclass="tag"><spanclass="tag-avatar avatar cover-image"data-image-src="assets/images/faces/female/16.jpg"></span>  Victoria</span><spanclass="tag"><spanclass="tag-avatar avatar cover-image"data-image-src="assets/images/faces/male/41.jpg"></span>  Nathan</span><spanclass="tag"><spanclass="tag-avatar avatar cover-image"data-image-src="assets/images/faces/female/1.jpg"></span>  Alice</span><spanclass="tag"><spanclass="tag-avatar avatar cover-image"data-image-src="assets/images/faces/female/18.jpg"></span>  Rose</span><spanclass="tag"><spanclass="tag-avatar avatar cover-image"data-image-src="assets/images/faces/male/16.jpg"></span>  Peter</span><spanclass="tag"><spanclass="tag-avatar avatar cover-image"data-image-src="assets/images/faces/male/26.jpg"></span>  Wayne</span><spanclass="tag"><spanclass="tag-avatar avatar cover-image"data-image-src="assets/images/faces/female/7.jpg"></span>  Michelle</span><spanclass="tag"><spanclass="tag-avatar avatar cover-image"data-image-src="assets/images/faces/female/17.jpg"></span>  Debra</span>

List of tags

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

First tagSecond tagThird tag 
<divclass="tags"><spanclass="tag">First tag</span><spanclass="tag">Second tag</span><spanclass="tag">Third tag</span></div>

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

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

Tag remove

One Two Three Four 
<divclass="tags"><spanclass="tag">    One    <ahref="#"class="tag-addon"><iclass="fe fe-x"></i></a></span><spanclass="tag">    Two    <ahref="#"class="tag-addon"><iclass="fe fe-x"></i></a></span><spanclass="tag">    Three    <ahref="#"class="tag-addon"><iclass="fe fe-x"></i></a></span><spanclass="tag">    Four    <ahref="#"class="tag-addon"><iclass="fe fe-x"></i></a></span></div>

Tag addons

npm
npm
bundle passing
CSS gzip size 20.9 kB 
<divclass="tag">  npm  <ahref="#"class="tag-addon"><iclass="fe fe-x"></i></a></div><divclass="tag tag-danger">  npm  <spanclass="tag-addon"><iclass="fe fe-activity"></i></span></div><divclass="tag">  bundle  <spanclass="tag-addon tag-success">passing</span></div><spanclass="tag tag-dark">  CSS gzip size  <spanclass="tag-addon tag-warning">20.9 kB</span></span>

Color tag

Blue tagAzure tagIndigo tagPurple tagPink tagRed tagOrange tagYellow tagLime tagGreen tagTeal tagCyan tagGray tagDark gray tag 
<spanclass="tag tag-blue">Blue tag</span><spanclass="tag tag-azure">Azure tag</span><spanclass="tag tag-indigo">Indigo tag</span><spanclass="tag tag-purple">Purple tag</span><spanclass="tag tag-pink">Pink tag</span><spanclass="tag tag-red">Red tag</span><spanclass="tag tag-orange">Orange tag</span><spanclass="tag tag-yellow">Yellow tag</span><spanclass="tag tag-lime">Lime tag</span><spanclass="tag tag-green">Green tag</span><spanclass="tag tag-teal">Teal tag</span><spanclass="tag tag-cyan">Cyan tag</span><spanclass="tag tag-gray">Gray tag</span><spanclass="tag tag-gray-dark">Dark gray tag</span>