Tags
Default
Use c-tag class to show a tag.
Animal & PetAutomotiveLanding
ペット・動物自動車ランディング
p
span.c-tag Animal & Pet
span.c-tag Automotive
span.c-tag Landing
p
span.c-tag ペット・動物
span.c-tag 自動車
span.c-tag ランディング
<p>
<span class="c-tag">Animal & Pet</span><span class="c-tag">Automotive</span><span class="c-tag">Landing</span>
</p>
<p>
<span class="c-tag">ペット・動物</span><span class="c-tag">自動車</span><span class="c-tag">ランディング</span>
</p>Adaptive width
Add -width-full to make a tag's width adaptive. You can control its width with a wrapper.
p style="width: 100px;"
a.c-tag.-width-full
| Animal & Pet
p style="width: 100px;"
a.c-tag.-width-full
| Automotive
p style="width: 100px;"
a.c-tag.-width-full
| Landing
<p style="width: 100px;">
<a class="c-tag -width-full">Animal & Pet</a>
</p>
<p style="width: 100px;">
<a class="c-tag -width-full">Automotive</a>
</p>
<p style="width: 100px;">
<a class="c-tag -width-full">Landing</a>
</p>With number
Add -with-number to show a number inside a tag. Use .c-tag__number for the number itself.
p
a.c-tag.-with-number
| Animal & Pet
span.c-tag__number 5
a.c-tag.-with-number
| Automotive
span.c-tag__number 12
a.c-tag.-with-number
| Landing
span.c-tag__number 999
p
a.c-tag.-with-number
| ペット・動物
span.c-tag__number 5
a.c-tag.-with-number
| 自動車
span.c-tag__number 12
a.c-tag.-with-number
| ランディング
span.c-tag__number 99999
<p>
<a class="c-tag -with-number">Animal & Pet<span class="c-tag__number">5</span></a><a class="c-tag -with-number">Automotive<span class="c-tag__number">12</span></a><a class="c-tag -with-number">Landing<span class="c-tag__number">999</span></a>
</p>
<p>
<a class="c-tag -with-number">ペット・動物<span class="c-tag__number">5</span></a><a class="c-tag -with-number">自動車<span class="c-tag__number">12</span></a><a class="c-tag -with-number">ランディング<span class="c-tag__number">99999</span></a>
</p>