Tags
Tags are used to label, organize, or categorize content. Tags can be used as a method of filtering data or to show items within a particular category.
Types
Topic tag
Topic tags appear with content such as blog posts and press releases to display associated topics. When clicked, a topic tag takes a user to a filtered view of other items tagged with the same topic tag. In this filtered view, a topic tag appears as a filter tag.
Filter tag
Filter tags are used as a part of multiselects to display categories, topics, and languages selected in a filterable list control panel.
HTML code snippet
<div class="m-tag-group"><button class="a-tag">Option 1 <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg__error" viewBox="0 0 12 19"><path d="M11.383 13.644A1.03 1.03 0 0 1 9.928 15.1L6 11.172 2.072 15.1a1.03 1.03 0 1 1-1.455-1.456l3.928-3.928L.617 5.79a1.03 1.03 0 1 1 1.455-1.456L6 8.261l3.928-3.928a1.03 1.03 0 0 1 1.455 1.456L7.455 9.716z"></path></svg></button><button class="a-tag">Option 4<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg__error" viewBox="0 0 12 19"><path d="M11.383 13.644A1.03 1.03 0 0 1 9.928 15.1L6 11.172 2.072 15.1a1.03 1.03 0 1 1-1.455-1.456l3.928-3.928L.617 5.79a1.03 1.03 0 1 1 1.455-1.456L6 8.261l3.928-3.928a1.03 1.03 0 0 1 1.455 1.456L7.455 9.716z"></path></svg></button></div>
Behavior
To clear a filter tag selection, click the “x” icon inside of the filter tag.