A tag list is a list of tags used to indicate that certain content is related to certain subjects by using a specific keywords, and where each subject is represented as a tag using the corresponding keyword.
A tag list allows to quickly scan on overviews which pieces of content are or aren’t related to certain subjects. It also allows to generate specific overviews with all content about a selection of certain subjects. On detail pages, a tag list shows what subject the page is about.
There are three types of tag lists, depending of the type of tags that is used, each with a unique use and presentation:
See the tags documentation for more information about the three types of tags and their usage in the style guide.
<div class="tag-list-wrapper">
<ul class="tag-list{{ modifier ? ' ' ~ modifier : ''}}">
{% for tag in tags %}
<li>
{% include '@tag' with {
tag_text: tag.text,
type: tag.type
} %}
</li>
{% endfor %}
{% if link %}
<li>
{% include '@link' with {
text: link.text,
link: link.link
} %}
</li>
{% endif %}
</ul>
</div>
<!-- Default -->
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
In the
</span>
</li>
<li>
<span class="tag ">
summer time
</span>
</li>
<li>
<span class="tag ">
when the weather
</span>
</li>
<li>
<span class="tag ">
is fine
</span>
</li>
</ul>
</div>
<!-- Link -->
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<a href="javascript:(void);" class="tag ">
In the
</a>
</li>
<li>
<a href="javascript:(void);" class="tag ">
summer time
</a>
</li>
<li>
<a href="javascript:(void);" class="tag ">
when the weather
</a>
</li>
<li>
<a href="javascript:(void);" class="tag ">
is fine
</a>
</li>
</ul>
</div>
<!-- Filter -->
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag filter ">
In the
<button><span class="visually-hidden">Remove In the</span></button>
</span>
</li>
<li>
<span class="tag filter ">
summer time
<button><span class="visually-hidden">Remove summer time</span></button>
</span>
</li>
<li>
<span class="tag filter ">
when the weather
<button><span class="visually-hidden">Remove when the weather</span></button>
</span>
</li>
<li>
<span class="tag filter ">
is fine
<button><span class="visually-hidden">Remove is fine</span></button>
</span>
</li>
<li>
<a href='#'>
Remove all filters </a>
</li>
</ul>
</div>
/* Default */
{
"modifier": null,
"tags": [
{
"text": "In the",
"type": "span-tag"
},
{
"text": "summer time",
"type": "span-tag"
},
{
"text": "when the weather",
"type": "span-tag"
},
{
"text": "is fine",
"type": "span-tag"
}
]
}
/* Link */
{
"modifier": null,
"tags": [
{
"text": "In the",
"type": "tag"
},
{
"text": "summer time",
"type": "tag"
},
{
"text": "when the weather",
"type": "tag"
},
{
"text": "is fine",
"type": "tag"
}
]
}
/* Filter */
{
"modifier": null,
"tags": [
{
"text": "In the",
"type": "filter-tag"
},
{
"text": "summer time",
"type": "filter-tag"
},
{
"text": "when the weather",
"type": "filter-tag"
},
{
"text": "is fine",
"type": "filter-tag"
}
],
"link": {
"link": "#",
"text": "Remove all filters"
}
}
.tag-list-wrapper {
.tag-list {
@include small-text();
display: flex;
flex-wrap: wrap;
margin: -4px;
list-style: none;
li,
a,
span {
width: 100%;
@include phablet {
width: auto;
}
}
li {
margin: 5px;
}
}
}