Tags

Filter tags provide a simple way to visualise where single or multiple selections have been made from a list of options. These are predominantly used in combination with filter menus and should be used only where necessary.


Once tags have been removed, reload page to reinstate tags.

  • Dogs
  • Tailored nutirtion
  • Cats
  • Our values
html
            <ul class="rc-list rc-list--inline rc-list--blank rc-list--reset-margin rc-list--align">
    <li class="rc-list__item">
        <span class="rc-tag">
        Dogs
        <button class="rc-tag__close rc-btn rc-btn--icon rc-icon rc-close--xs rc-iconography rc-interactive" aria-label="Close dogs tag"><span class="rc-screen-reader-text">Close dogs tag</span></button>
        </span>
    </li>
    <li class="rc-list__item">
        <span class="rc-tag">
            Tailored nutirtion
            <button class="rc-tag__close rc-btn rc-btn--icon rc-icon rc-close--xs rc-iconography rc-interactive" aria-label="Close tailored nutirtion tag"><span class="rc-screen-reader-text">Close tailored nutirtion tag</span></button>
        </span>
    </li>
    </li>
    <li class="rc-list__item">
        <span class="rc-tag">
            Cats
            <button class="rc-tag__close rc-btn rc-btn--icon rc-icon rc-close--xs rc-iconography rc-interactive" aria-label="Close cats tag"><span class="rc-screen-reader-text">Close cats tag</span></button>
        </span>
    </li>
    <li class="rc-list__item">
        <span class="rc-tag">
            Our values
            <button class="rc-tag__close rc-btn rc-btn--icon rc-icon rc-close--xs rc-iconography rc-interactive" aria-label="Close our values tag"><span class="rc-screen-reader-text">Close our values tag</span></button>
        </span>
    </li>
</ul>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 13th November 2018 [ui_assets/elements/tags.yml]
    Unify accessibility content
  • 13th November 2018 [ui_assets/elements/tags.yml]
    Update tags example with proper classes and aria labels
  • 6th November 2018 [ui_assets/elements/tags.yml]
    Remove data-js attributes and add interactive class to icons
  • 13th September 2018 [ui_assets/elements/tags.yml]
    spelling & grammar corrections
  • 12th July 2018 [ui_assets/elements/tags.yml]
    Prefixed classes throughout the portal with rc-.
  • 11th July 2018 [ui_assets/elements/tags.yml]
    replace close span with button
  • 3rd July 2018 [ui_assets/elements/tags.yml]
    update docs
  • 2nd July 2018 [ui_assets/elements/tags.yml]
    different tag text
  • 2nd July 2018 [ui_assets/elements/tags.yml]
    add tags page. Add tags docs and markup