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

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__muted .s-tag Applies a visually muted style from the base style.
.s-tag__themed .s-tag Applies a themed color to the tag.
.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.
.is-selected .s-tag Adds a currently selected / active appearance.
<div class="d-flex g4">
<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>
<span class="s-tag is-selected">razor <button class="s-tag--dismiss">@Svg.ClearSm</button></span>
</div>
jquery javascript Google Android android razor
<div class="d-flex g4">
<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>
<a class="s-tag s-tag__moderator is-selected" href="#">status-deferred</a>
</div>
<div class="d-flex g4">
<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>
<a class="s-tag s-tag__required is-selected" href="#">featured</a>
</div>
discussion feature-request bug featured
<div class="d-flex g4">
<a class="s-tag s-tag__muted" href="#">asp-net</a>
<span class="s-tag s-tag__muted">netscape <button class="s-tag--dismiss">@Svg.ClearSm</button></span>
<a class="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>
<span class="s-tag s-tag__muted is-selected">razor <button class="s-tag--dismiss">@Svg.ClearSm</button></span>
</div>
asp-net netscape SQL Server sql-server razor
<div class="d-flex g4">
<a class="s-tag s-tag__watched" href="#">asp-net</a>
</div>
<div class="d-flex g4">
<a class="s-tag s-tag__ignored" href="#">netscape</a>
</div>
Class Applied to Example
.s-tag__xs .s-tag css
.s-tag__sm .s-tag css
.s-tag N/A css
.s-tag__md .s-tag css
.s-tag__lg .s-tag css
Deploys by Netlify