The small labels that are everywhere leaving hints of information. Used for counts and labels in blog, categories among others.
You want to leave clues, this is what you need!
<span class="e-tag">Hi, I'm tag</span>
<span class="e-tag white">White</span>
<span class="e-tag gray">Gray</span>
<span class="e-tag dark">Dark</span>
<span class="e-tag black">Black</span>
<span class="e-tag primary">Primary</span>
<span class="e-tag success">Success</span>
<span class="e-tag danger">Danger</span>
<span class="e-tag warning">Warning</span>
<span class="e-tag sky">Sky / info</span>
<span class="e-tag purple">Purple</span>The tags will grow according to the size of their parent class,
they take a proportion in % of the size font-size
of the larger label
Example: h1
<h1>Hi, I'm 1.heading <span class="e-tag">New</span></h1>
<h2>Hi, I'm 2.heading <span class="e-tag">New</span></h2>
<h3>Hi, I'm 3.heading <span class="e-tag">New</span></h3>
<h4>Hi, I'm 4.heading <span class="e-tag">New</span></h4>
<h5>Hi, I'm 5.heading <span class="e-tag">New</span></h5>
<h6>Hi, I'm 6.heading <span class="e-tag">New</span></h6><h1>Hi, I'm 1.heading <span class="e-tag static">New</span></h1>
<h2>Hi, I'm 2.heading <span class="e-tag static">New</span></h2>
<h3>Hi, I'm 3.heading <span class="e-tag static">New</span></h3>
<h4>Hi, I'm 4.heading <span class="e-tag static">New</span></h4>
<h5>Hi, I'm 5.heading <span class="e-tag static">New</span></h5>
<h6>Hi, I'm 6.heading <span class="e-tag static">New</span></h6>If you take a tour of all the components and utilities you can create more elegant and desired appearances with help and utility classes.
<span class="e-tag rounded">Tag</span>
<span class="e-tag rounded primary">Primary</span>
<span class="e-tag rounded success">Success</span>
<span class="e-tag rounded danger">Danger</span>
<span class="e-tag rounded warning">Warning</span>
<span class="e-tag rounded purple">Purple</span><span class="e-tag shadow white">Tag</span>
<span class="e-tag shadow-6 primary">Primary</span>
<span class="e-tag shadow-5 success">Success</span>
<span class="e-tag shadow-4 danger">Danger</span>
<span class="e-tag shadow-3 warning">Warning</span>
<span class="e-tag shadow-2 purple">Purple</span><button type="button" class="e-btn primary">
Button <span class="e-tag">5</span>
</button>
<button type="button" class="e-btn danger">
Button <span class="e-tag transparent">5</span>
</button>
<a class="e-btn inverted purple">
Button <span class="e-tag purple">5</span>
</a>With the container you can create large lists of tags that are grouped in an orderly manner, useful for classifications, categories, order, blogs among other uses.
Use e-tags
<div class="e-tags">
<span class="e-tag">Tag 1</span>
<span class="e-tag">Tag 2</span>
<span class="e-tag">Tag 3</span>
<span class="e-tag">Tag 4</span>
</div>Adding the class unified the container creates unified tags, creating a label even more elegant and diverse uses.
Recommended to use two tags per container e-tags
to give double style even so you can add as many as you create, although they may break.
Use e-tags unified
<div class="e-toolbar">
<div class="e-tags unified">
<span class="e-tag rounded primary">Version</span>
<span class="e-tag rounded white">0.5.7</span>
</div>
<div class="e-tags unified">
<span class="e-tag dark">License</span>
<span class="e-tag success">MIT</span>
</div>
<div class="e-tags unified">
<span class="e-tag dark">Changelog</span>
<span class="e-tag sky">md</span>
</div>
<div class="e-tags unified">
<span class="e-tag dark">Chat</span>
<span class="e-tag primary">gitter</span>
</div>
<div class="e-tags unified">
<span class="e-tag dark">npm</span>
<span class="e-tag primary">eFrolic</span>
</div>
</div>If you use a large number of tags, use the container e-toolbar to put all the tags together as in the example.
<div class="e-toolbar">
<div class="e-tags unified">
<span class="e-tag success">Section</span>
<i class="e-tag success fas fa-times"></i>
</div>
<div class="e-tags unified">
<span class="e-tag success">Footer</span>
<i class="e-tag white fas fa-times"></i>
</div>
<div class="e-tags unified">
<span class="e-tag rounded purple">Tag</span>
<i class="e-tag rounded fas fa-times"></i>
</div>
<div class="e-tags unified">...x4</div>
<div class="e-tags unified">
<span class="e-tag link">Element</span>
<a class="e-tag fas fa-times"></a>
</div>
</div>If you are using our framework in a product that generates income,
you can also help its maintenance if you wish, if you frequently help in your company
or personal developments consider making a recurring donation.
If you want to see your company's logo on this site it's time to be a serious Sponsor.
