-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
982d700
commit f5a121e
Showing
1 changed file
with
44 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
--- | ||
title: Tags | ||
collection_name: pages | ||
layout: variation | ||
section: components | ||
status: Released | ||
description: 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. | ||
variation_groups: | ||
- variations: | ||
- variation_is_deprecated: false | ||
variation_name: Filter tag | ||
variation_description: Filter tags are used to display quick and useful category | ||
labels to the user. They are often used to display categories or | ||
active filters. | ||
variation_code_snippet: <ul class="o-multiselect_choices"><li | ||
data-option="option1"><button type="button"><label | ||
for="test_select__multiple-option1">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></label></button></li><li | ||
data-option="option4"><button type="button"><label | ||
for="test_select__multiple-option4">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></label></button></li></ul> | ||
variation_group_name: Types | ||
behavior: |- | ||
* To clear a selection, click the “x” icon inside of the filter tag. | ||
related_items: >- | ||
* | ||
[Multiselect](https://cfpb.github.io/design-system/components/selects#multiselect)[](https://cfpb.github.io/design-system/patterns/filterable-list-control-panels) | ||
* [Filterable list control panels](https://cfpb.github.io/design-system/patterns/filterable-list-control-panels) | ||
--- |