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.

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">@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</a>

jquery javascript android

Moderator

Section titled Moderator

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

status-completed status-bydesign status-planned

Required

Section titled Required

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

discussion feature-request bug

Watched

Section titled Watched

<a class="s-tag s-tag__watched" href="#">asp-net</a>

asp-net typescript svelte

Ignored

Section titled Ignored

<a class="s-tag s-tag__ignored" href="#">netscape</a>
<span class="s-tag s-tag__ignored s-tag__required">rust<button class="s-tag--dismiss"><span class="v-visible-sr">Dismiss rust tag</span> @Svg.ClearSm</button></span>
<a class="s-tag s-tag__ignored s-tag__moderator" href="#">swift</a>

netscape rust swift

Deleted

Section titled Deleted

<a class="s-tag s-tag__deleted" href="#">java</a>
<span class="s-tag s-tag__deleted s-tag__required">python<button class="s-tag--dismiss"><span class="v-visible-sr">Dismiss python tag</span>{% icon "ClearSm" %}</button></span>
<a class="s-tag s-tag__deleted s-tag__moderator" href="#">elixir</a>

java python elixir

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