A tag is used to indicate that certain content is related to a certain subject by using a specific keyword.
For instance, if a piece of content is related to recycling, a tag could be used with the keyword “recycling”, to indicate that the piece of content is related to recycling.
A tag allows to quickly scan on overviews which pieces of content are or aren’t related to a certain subject. It also allows to generate specific overviews with all content about a certain subject. On detail pages, a tag shows what subject the page is about.
There are three types of tags, each with a unique use and presentation:
The default tag is used on detail pages to indicate that the content on that detail page is about the specific subject that is represented by the tag. One or more defaull tags can be used.
On detail pages, the default tags are also shown as an indicator that there is other content on the website about the same subject(s). Each default tag therefore has a link to an overview page that collects all content about the specific subject that is represented by the tag.
The filter tag is used on pages using the filter layout to indicate active filters. One or more filter tags can be shown if the page features one or more filters. Everytime the user selects a filter value the corresponding filter tag is shown to show the filter is active. Everytime the user deselects a filter value, the corresponding filter tag is hidden again to show that the filter is no longer active. This way, the user always has an easy way to see which filters are active at a specific point. Finally, the user can also click a filter tag to deselect the corresponding filter.
The span tag is used in teasers, typically in a teaser collection on overview pages, to show that the content that the teaser represents is about the specific subject that is represented by the tags. In a teaser, one or more span tags can be used. Span tags are not clickable, they just serve a visual mean on overview page to show that content is related to a specific subject.
{% if type == 'tag' %}
<a href="javascript:(void);" class="tag {{ modifier }}">
{{ tag_text }}
</a>
{% endif %}
{% if type == 'filter-tag' %}
<span class="tag filter {{ modifier }}">
{{ tag_text }}
<button><span class="visually-hidden">{{ 'Remove ' ~ tag_text }}</span></button>
</span>
{% endif %}
{% if type == 'span-tag' %}
<span class="tag {{ modifier }}">
{{ tag_text }}
</span>
{% endif %}
<!-- Default -->
<a href="javascript:(void);" class="tag ">
Inner city
</a>
<!-- Filter Tag -->
<span class="tag filter ">
Inner city
<button><span class="visually-hidden">Remove Inner city</span></button>
</span>
<!-- Span Tag -->
<span class="tag ">
Inner city
</span>
/* Default */
{
"tag_text": "Inner city",
"type": "tag"
}
/* Filter Tag */
{
"tag_text": "Inner city",
"type": "filter-tag"
}
/* Span Tag */
{
"tag_text": "Inner city",
"type": "span-tag"
}
.tag {
@include theme('border-color', 'color-primary--lighten-3', 'tag-span-border-color');
@include theme('background-color', 'color-secondary', 'tag-background-color');
display: inline-flex;
align-items: center;
justify-content: space-between;
padding: .7em .8em;
border: 1px solid;
border-radius: border-radius('radius-1');
font-size: .7rem;
line-height: 1.1;
text-decoration: none;
&.filter {
@include theme('background-color', 'color-primary--lighten-4', 'tag-filter-background-color');
padding: .4em .8em .4em 1.2em;
border-color: transparent;
&:hover button {
@include theme('background-color', 'color-primary--lighten-4', 'tag-close-button-background-hover');
}
button {
width: 1.1rem;
height: 1.1rem;
margin-left: .5rem;
padding: 0;
transition: background-color .2s ease-in-out;
border: 0;
border-radius: 100%;
background: transparent svg-as-background('cross', color('dark-gray'), 16, 16);
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
}
}
a.tag {
@include theme('border-color', 'color-primary--lighten-2', 'button-secondary-border-color');
@include icon(arrow-right, after);
padding: .4em .8em;
border-width: 2px;
&::after {
width: 1.1rem;
height: 1.1rem;
margin-left: .5rem;
font-size: 1rem;
vertical-align: middle;
}
&,
&:focus,
&:hover {
background-image: none;
}
&:hover {
@include theme('background-color', 'color-primary--lighten-4', 'button-secondary-hover-background');
@include theme('border-color', 'color-primary--lighten-2', 'button-secondary-hover-border-color');
}
}