Sections

Tags

Tags are an interactive, community-generated keyword that allow communities to label, organize, and discover related content. Tags are maintained by their respective communities

Classes

Section titled Classes

Class	Applied to	Description
`.s-tag`	`N/A`	Base tag style that is used almost universally.
`.s-tag__moderator`	`.s-tag`	Exclusively used within Meta communities by moderators (and employees) to assign unique statuses to questions.
`.s-tag__required`	`.s-tag`	Exclusively used within Meta communities to denote the post type. One of these tags are required on all Meta posts.
`.s-tag__ignored`	`.s-tag`	Prepends an icon to indicate the tag is ignored.
`.s-tag__watched`	`.s-tag`	Prepends an icon to indicate the tag is watched.
`.s-tag--dismiss`	`N/A`	A child element within `.s-tag` for a clear or dismiss action icon. When using this element, it should be rendered as a `button` containing the icon and the parent `.s-tag` should be rendered as a `span` element.
`.s-tag--sponsor`	`N/A`	A child element within `.s-tag` that correctly positions a tag’s sponsor logo.

Accessibility

Section titled Accessibility

Tags should be focusable and navigable with the keyboard. The various tag states (Required, Moderator, Watched, Ignored) are visually distinct but do not include any text indicators for screen readers. For that reason it is recommended to provide additional context using hidden text elements with the v-visible-sr class.

Examples

Section titled Examples

Default tag

Section titled Default tag

<a class="s-tag" href="#">jquery</a>
<span class="s-tag">javascript <button class="s-tag--dismiss"><span class="v-visible-sr">Dismiss javascript tag</span>@Svg.ClearSm</button></span>
<a class="s-tag" href="#"><img class="s-tag--sponsor" src="https://i.stack.imgur.com/tKsDb.png" width="16" height="18" alt="Google Android"> android <div class="v-visible-sr">Sponsored tag</div></a>

jquery javascript android

Moderator

Section titled Moderator

<a class="s-tag s-tag__moderator" href="#">status-completed <div class="v-visible-sr">Moderator tag</div></a>
<span class="s-tag s-tag__moderator">status-bydesign <div class="v-visible-sr">Moderator tag</div><button class="s-tag--dismiss"><span class="v-visible-sr">Dismiss status-bydesign tag</span>@Svg.ClearSm</button></span>
<a class="s-tag s-tag__moderator" href="#">status-planned <div class="v-visible-sr">Moderator tag</div></a>

status-completed

Moderator tag

status-bydesign

Moderator tag

status-planned

Moderator tag

Required

Section titled Required

<a class="s-tag s-tag__required" href="#">discussion <div class="v-visible-sr">Required tag</div></a>
<span class="s-tag s-tag__required">feature-request <div class="v-visible-sr">Required tag</div><button class="s-tag--dismiss"><span class="v-visible-sr">Dismiss feature-request tag</span>@Svg.ClearSm</button></span>
<a class="s-tag s-tag__required" href="#">bug <div class="v-visible-sr">Required tag</div></a>

discussion

Required tag

feature-request

Required tag

bug

Required tag

Watched

Section titled Watched

<a class="s-tag s-tag__watched" href="#">asp-net <div class="v-visible-sr">Watched tag</div></a>

asp-net

Watched tag

Ignored

Section titled Ignored

<a class="s-tag s-tag__ignored" href="#">netscape <div class="v-visible-sr">Ignored tag</div></a>

netscape

Ignored tag

Sizes

Section titled Sizes

Class	Applied to	Example
`.s-tag__sm`	`.s-tag`	css
`.s-tag`	`N/A`	css
`.s-tag__lg`	`.s-tag`	css