--- layout: default permalink: /tags category: components title: Tags description: "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!" ---

{{ page.title }} Component

{{ page.description }}


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
{% highlight html %} Hi, I'm tag White Gray Dark Black Primary Success Danger Warning Sky / info Purple {% endhighlight %}
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
{% highlight html %}

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
{% endhighlight %}
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
{% highlight html %}

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
{% endhighlight %}
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
{% highlight html %} Tag Primary Success Danger Warning Purple {% endhighlight %}
Using the beautiful shadows. | Add shadow

Tag Primary Success Danger Warning Purple
Tag Primary Success Danger Warning Purple
{% highlight html %} Tag Primary Success Danger Warning Purple {% endhighlight %}
Combining with the buttons

{% highlight html %} Button 5 {% endhighlight %}
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
{% highlight html %}
Tag 1 Tag 2 Tag 3 Tag 4
{% endhighlight %}
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
{% highlight html %}
Version 0.5.7
License MIT
Changelog md
Chat gitter
npm eFrolic
{% endhighlight %}
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
{% highlight html %}
Section
Footer
Tag
...x4
Element
{% endhighlight %}