Tags Component

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!


15 Beautiful colors for tags

Hi, I'm tag White Gray Dark Black
Primary Success Danger Warning Sky / info Purple
Green-gradient Purple-gradient Blue-gradient Inst-gradient
  <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>
Sizes

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


Hi, I'm 1.heading New

Hi, I'm 2.heading New

Hi, I'm 3.heading New

Hi, I'm 4.heading New

Hi, I'm 5.heading New
Hi, I'm 6.heading New
<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>
Although if you want a static size.
Add static class to to have an original size tag regardless of the parent class.

Hi, I'm 1.heading New

Hi, I'm 2.heading New

Hi, I'm 3.heading New

Hi, I'm 4.heading New

Hi, I'm 5.heading New
Hi, I'm 6.heading New
<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>
Change of appearances and combinations

If you take a tour of all the components and utilities you can create more elegant and desired appearances with help and utility classes.


Add rounded class to make a rounded tag.

Tag Primary Success Danger Warning Purple
<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>
Using the beautiful shadows. | Add shadow

Tag Primary Success Danger Warning Purple
Tag Primary Success Danger Warning Purple
<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>
Combining with the buttons

<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>
Tag list

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


Tag 1 Tag 2 Tag 3 Tag 4 Tag 5 Tag 6 Tag 7 Tag 8 Tag 9 Tag 10 Tag 11 Tag 12 Tag 13 Tag 14 Tag 15 Tag 16 Tag 17 Tag 18 Tag 19 Tag 20
<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>
Tag list unified

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


hashtag eFrolic
eFrolic
eFrolic
Efra Peralta

npm eFrolic
Version 0.5.7
npm V8.0.0
License MIT
Changelog md
Chat gitter

eFrolic
eFrolic
Version 0.5.7 0.5.8 0.5.9 0.6.0 Latest
Version 0.5.7 0.5.8 0.5.9 0.6.0 Latest

Version 0.5.7
Chat gitter
Efra Peralta
Version 0.5.7
npm V8.0.0
License MIT
Changelog md
<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>
Add containers e-tags together

If you use a large number of tags, use the container e-toolbar to put all the tags together as in the example.


Footer
Section
Grid
Alerts
Notes
Modal
Buttons
Navbar
Footer
Section
Grid
Alerts
Notes
Modal
Buttons
Navbar

Grid
Alerts
Notes
Modal
Buttons
Navbar
Section
Grid
Alerts
Notes

Link (The pointer over the button)

Element
Element
Element
Element
Element
Element
Element
Element
<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>
Contribute on GitHub
Become a sponsor.

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.

eFrolic | framework css 2018
eFrolic | framework css 2018

One-time donation


Donate
eFrolic | framework css 2018
eFrolic | framework css 2018

Serious sponsor


Become a Patron