Tag List

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>
<!-- 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"
  }
}

  • Content:
    .tag-list-wrapper {
      .tag-list {
        display: flex;
        flex-wrap: wrap;
        margin: -.2rem;
        list-style: none;
    
        li {
          margin: .2rem;
        }
    
        a {
          @include bold-text;
          white-space: nowrap;
        }
      }
    }
    
  • URL: /components/raw/tag-list/_tag-list.scss
  • Filesystem Path: components/31-molecules/tag-list/_tag-list.scss
  • Size: 227 Bytes