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

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__danger`	`.s-tag`	To be used when a tag is in an error state.
`.s-tag__muted`	`.s-tag`	Applies a visually muted style from the base style.
`.s-tag--dismiss`	`N/A`	A child element within `.s-tag` that correctly positions a clear or dismiss action icon.
`.s-tag--sponsor`	`N/A`	A child element within `.s-tag` that correctly positions a tag's sponsor logo.

Examples

Default tag

<div class="grid gs4">
    <a class="grid--cell s-tag" href="#">jquery</a>
    <a class="grid--cell s-tag" href="#">javascript <span class="s-tag--dismiss">@Svg.ClearSm</span></a>
    <a class="grid--cell 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>
</div>

jquery javascript android

Moderator

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

status-completed status-bydesign status-planned

Required

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

discussion feature-request bug

Muted

<div class="grid gs4">
    <a class="grid--cell s-tag s-tag__muted" href="#">asp-net</a>
    <a class="grid--cell s-tag s-tag__muted" href="#">netscape <span class="s-tag--dismiss">@Svg.ClearSm</span></a>
    <a class="grid--cell s-tag s-tag__muted" href="#"><img class="s-tag--sponsor" src="https://i.stack.imgur.com/gfrSH.png" width="18" height="16" alt="SQL Server"> sql-server</a>
</div>

asp-net netscape sql-server

Danger

<div class="grid gs4">
    <a class="grid--cell s-tag s-tag__danger" href="#">pwe <span class="s-tag--dismiss">@Svg.ClearSm</span></a>
    <a class="grid--cell s-tag s-tag__danger" href="#">aron <span class="s-tag--dismiss">@Svg.ClearSm</span></a>
    <a class="grid--cell s-tag s-tag__danger" href="#">hyea <span class="s-tag--dismiss">@Svg.ClearSm</span></a>
</div>

pwe aron hyea

Sizes

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