Tags
Default tag
<spanclass="tag">First tag</span><spanclass="tag">Second tag</span><spanclass="tag">Third tag</span>Link tag
<ahref="#"class="tag">First tag</a><ahref="#"class="tag">Second tag</a><ahref="#"class="tag">Third tag</a>Rounded tag
<spanclass="tag tag-rounded">First tag</span><spanclass="tag tag-rounded">Second tag</span><spanclass="tag tag-rounded">Third tag</span>Color 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
<spanclass="tag"><spanclass="tag-avatar avatar"style="background-image: url(assets/images/faces/female/16.jpg)"></span> Victoria</span><spanclass="tag"><spanclass="tag-avatar avatar"style="background-image: url(assets/images/faces/male/41.jpg)"></span> Nathan</span><spanclass="tag"><spanclass="tag-avatar avatar"style="background-image: url(assets/images/faces/female/1.jpg)"></span> Alice</span><spanclass="tag"><spanclass="tag-avatar avatar"style="background-image: url(assets/images/faces/female/18.jpg)"></span> Rose</span><spanclass="tag"><spanclass="tag-avatar avatar"style="background-image: url(assets/images/faces/male/16.jpg)"></span> Peter</span><spanclass="tag"><spanclass="tag-avatar avatar"style="background-image: url(assets/images/faces/male/26.jpg)"></span> Wayne</span><spanclass="tag"><spanclass="tag-avatar avatar"style="background-image: url(assets/images/faces/female/7.jpg)"></span> Michelle</span><spanclass="tag"><spanclass="tag-avatar avatar"style="background-image: url(assets/images/faces/female/17.jpg)"></span> Debra</span>List of tags
You can create a list of tags with the .tagscontainer.
<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.
<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
<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
<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>