• Light Version

  • Dark Version

  • RTL Version

Ericsson University
avatar
Sara Hopkins

Webdeveloper

Statistics

$545

27%

Friends

Ericsson University

Documentation

English
SpanishjapaneseFrance
Mark all as read

  • Campaign Holidayis nearly reach budget limit.

  • New admission 32in computer department.

  • 6th sem result 67%in computer department.

  • New Feedback 53for university assessment.

Mark all as read
George
ProfileSettings6InboxMessage
Need help?Sign out

Default tag

Small tag labels to insert anywhere

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>

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>

Avatar tag

VictoriaNathanAliceRosePeterWayneMichelleDebra
<spanclass="tag"><spanclass="tag-avatar avatar"style="background-image: url(./demo/faces/female/16.jpg)"></span>Victoria </span><spanclass="tag"><spanclass="tag-avatar avatar"style="background-image: url(./demo/faces/male/41.jpg)"></span>Nathan </span><spanclass="tag"><spanclass="tag-avatar avatar"style="background-image: url(./demo/faces/female/1.jpg)"></span>Alice </span><spanclass="tag"><spanclass="tag-avatar avatar"style="background-image: url(./demo/faces/female/18.jpg)"></span>Rose </span><spanclass="tag"><spanclass="tag-avatar avatar"style="background-image: url(./demo/faces/male/16.jpg)"></span>Peter </span><spanclass="tag"><spanclass="tag-avatar avatar"style="background-image: url(./demo/faces/male/26.jpg)"></span>Wayne </span><spanclass="tag"><spanclass="tag-avatar avatar"style="background-image: url(./demo/faces/female/7.jpg)"></span>Michelle </span><spanclass="tag"><spanclass="tag-avatar avatar"style="background-image: url(./demo/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

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
bundlepassing
CSS gzip size20.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>