City of Ghent Style Guide

Tag list

When to use this component

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.

Types of tag lists and their usage within the style guide

There are three types of tag lists, depending of the type of tags that is used, each with a unique use and presentation:

  • Default tag list
  • Filter tag list
  • Span tag list

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>
<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>
{
  "modifier": null,
  "tags": [
    {
      "text": "In the",
      "type": "tag"
    },
    {
      "text": "summer time",
      "type": "tag"
    },
    {
      "text": "when the weather",
      "type": "tag"
    },
    {
      "text": "is fine",
      "type": "tag"
    }
  ]
}
  • Content:
    .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;
        }
      }
    }
    
  • URL: /components/raw/tag-list/_tag-list.scss
  • Filesystem Path: components/31-molecules/tag-list/_tag-list.scss
  • Size: 290 Bytes