Chips and tags

Documentation for chips and chip components.

Files

app/styles/modules/_chips.scss
app/styles/modules/_tags.scss

Chips

Chip can be created by using class .chip as shown on example below.

Example:

Normal size

Spaklinik

Charizard

Charizard3.5

Large size

Spaklinik

Charizard

Charizard3.5

Code:

<span class="chip">
  <span class="chip_label">Spaklinik</span>
</span>
<span class="chip">
  <span class="chip_avatar">
    <img src="/images/avatar.png">
  </span>
  <span class="chip_label">Charizard</span>
</span>
<span class="chip">
  <span class="chip_avatar">
    <img src="/images/avatar.png">
  </span>
  <span class="chip_label">Charizard</span>
  <span class="chip_more">
    <span class="text-color-theme-300">3.5</span>&nbsp;
    <i class="icon icon-s text-color-yellow">star</i>
  </span>
</span>

<span class="chip chip-l">
  ...
</span>

Active chips

Chips has active state via additional class .active as shown on example below.

Example:

Spaklinik

Charizard

Charizard3.5

Code:

<span class="chip active js-toggle" data-toggle-target="this">
  ...
</span>

Ghost chips

You can use .chip-ghost class with your .chip element for a nice ghost-like bordered chip.

Example:

Spaklinik

Charizard

Charizard3.5

Charizardghost-plain

Code:

<span class="chip clickable chip-ghost js-toggle" data-toggle-target="this">
  ...

  <span class="chip clickable js-toggle chip--ghost-plain chip-xs" data-toggle-target="this">
    ...
  </span>
</span>

Tags

Tag are similar to chips, but without support of rich information. Examples are shown below.

Example:

Tag
Tag #2
Tag taggovity

Code:

<ul class="tags">
  <li class="tag">Tag</li>
  ...
</ul>

Inverted tags

Tag can has inverted colors with additional class .tag-inverted if you need to display tags on dark background.

Example:

Tag
Tag #2
Tag taggovity

Code:

<ul class="tags">
  <li class="tag tag-inverted">Tag</li>
  ...
</ul>

Rounded tags

Use .tag-rounded if you need to display tags with rounded edges.

Example:

Rounded tag

Code:

<ul class="tags">
  <li class="tag tag-rounded">Rounded tag</li>
  ...
</ul>

Condensed tags

Use .tag-condensed if you need to display smaller tags.

Example:

condensed tag

Code:

<ul class="tags">
  <li class="tag tag-condensed tag-rounded">Rounded tag</li>
  ...
</ul>

Colored tags

Example:

tag-green
tag-blue
tag-orange
tag-red

Code:

<ul class="tags">
  <li class="tag tag-rounded tag-green">tag-green</li>
  ...
</ul>