46 #tags Tags
Tags component used to display tag section that is typically displayed under a content
Examples
.tags__item--bold
Tag modifier make all terms bold
<div class="tags">
<span class="tags__label">Tags:</span>
<div class="tags__items">
<a class="tags__item [modifier class]" href="#">Boot</a>
<a class="tags__item [modifier class]" href="#">Strap</a>
<a class="tags__item [modifier class]" href="#">Apple</a>
</div>
</div>
<!-- Or -->
<div class="tags">
<span class="tags__label">Tags:</span>
<div class="tags__items">
<span class="tags__item [modifier class]">
<a href="#">Boot</a>
</span>
<span class="tags__item [modifier class]">
<a href="#">Strap</a>
</span>
<span class="tags__item [modifier class]">
<a href="#">Apple</a>
</span>
</div>
</div>
<!-- Or -->
<div class="tags">
<span class="tags__label">Tags:</span>
<div class="tags__items">
<span class="tags__item [modifier class]">Boot</span>
<span class="tags__item [modifier class]">Strap</span>
<span class="tags__item [modifier class]">Apple</span>
</div>
</div>
Examples
.tags__item--bold
Tag modifier make all terms bold
<div class="facet-tag facet-tag--close">
<span class="facet-tag__label">Type</span>
<a class="facet-tag__value [modifier class]" href="#">Item 1.</a>
<span class="facet-tag__label">Department</span>
<a class="facet-tag__value [modifier class]" href="#">Item 2.</a>
</div>
Examples
containing
Words that the facet is containing
.tags__item--bold
Tag modifier make all terms bold
containing
Words that the facet is containing
<div class="facet-tag">
<span class="facet-tag__label [modifier class]">
containing
</span>
<span class="facet-tag__value [modifier class]">
Words that the facet is containing
</span>
</div>
46.3 #tags.hierarchical Tags Hierarchical
(taxonomy)
Examples
List of themes with link
List of themes without link
Agriculture & food
Forestry
Animal health and welfare
Bioeconomy
Environment
Atmosphere
Industrial research
.tags__item--bold
Tag modifier make all terms bold
List of themes with link
List of themes without link
Agriculture & food
Forestry
Animal health and welfare
Bioeconomy
Environment
Atmosphere
Industrial research
<div class="tags">
<div class="tags__label">List of themes with link</div>
<div class="tags__hierarchical">
<a href="#" class="tags__item [modifier class] tags__parent">Agriculture & food</a>
<a href="#" class="tags__item [modifier class]">Forestry</a>
<a href="#" class="tags__item [modifier class]">Animal health and welfare</a>
</div>
<div class="tags__hierarchical">
<a href="#" class="tags__item [modifier class] tags__parent">Bioeconomy</a>
</div>
<div class="tags__hierarchical">
<a href="#" class="tags__item [modifier class] tags__parent">Environment</a>
<a href="#" class="tags__item [modifier class]">Atmosphere</a>
</div>
<div class="tags__hierarchical">
<a href="#" class="tags__item [modifier class] tags__parent">Industrial research</a>
</div>
</div>
<!-- Or -->
<div class="tags">
<div class="tags__label">List of themes without link</div>
<div class="tags__hierarchical">
<span class="tags__item [modifier class] tags__parent">Agriculture & food</span>
<span class="tags__item [modifier class]">Forestry</span>
<span class="tags__item [modifier class]">Animal health and welfare</span>
</div>
<div class="tags__hierarchical">
<span class="tags__item [modifier class] tags__parent">Bioeconomy</span>
</div>
<div class="tags__hierarchical">
<span class="tags__item [modifier class] tags__parent">Environment</span>
<span class="tags__item [modifier class]">Atmosphere</span>
</div>
<div class="tags__hierarchical">
<span class="tags__item [modifier class] tags__parent">Industrial research</span>
</div>
</div>