Sections

Tags

Tags are interface elements that allow users to organize and discover related information throughout Stack Overflow.

Questions, jobs, and candidates can be tagged with up to 5 tags. Individual tags should not break onto multiple lines, though a list of tags can.

Default

Section titled Default

The default style of tags on Stack Overflow. 

<td>
    <a href="#" style="display: inline-block; border: 5px solid #E1ECF4; margin: 0 1px 4px 0; background: #E1ECF4; border-radius: 3px; color: #39739D; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;" class="s-tag">tag-name</a>
    <a href="#" style="display: inline-block; border: 5px solid #eff0f1; margin: 0 1px 4px 0; background: #eff0f1; border-radius: 3px; color: #535a60; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">meta-topic</a>
    <a href="#" style="display: inline-block; border: 5px solid #f9ecee; margin: 0 1px 4px 0; background: #f9ecee; border-radius: 3px; color: #C91D2E; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">status-completed</a>
</td>
tag-name tag another-tag-name
meta-topic status-completed
Note: Using the s-tag class applies :hover progressive enhancements defined in the <style> tag. Only email clients that support <style> in <head> will render the :hover. s-tag should be used on default powder blue tags only.

Themed

Section titled Themed

Some areas of the site can be themed by the community by setting a theme color. This theme color can be used to change the text and background color of tags in that community. 

<td>
    <a href="#" style="display: inline-block; border: 5px solid #EFF0F1; border-color: #2b8a3e01; margin: 0 1px 4px 0; background: #EFF0F1; background: #2b8a3e15; border-radius: 3px; color: #2b8a3e; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">tag-name</a>
</td>
tag-name tag another-tag-name

Themed tags use a variable theme color and CSS opacity. However not all email clients support opacity, so here’s how we work around those limitations:

For email clients that DON’T support opacity (mainly Windows Outlook and Yahoo), the background (both border-color and background) is defined as a solid gray color #EFF0F1. Email clients that don’t support opacity displayed themed tags with this gray background:

tag-name

How themed tags appear in email clients that DON’T support opacity.

For email clients that DO support opacity, we define the background again by using the theme color at 15% opacity (#2b8a3e15). The border-color uses the theme color at 1% opacity (#2b8a3e01) to avoid a perceivable border caused by two overlapping color at 15% and prevent email clients from collapsing a transparent border.

tag-name

How themed tags appear in email clients that DO support opacity.

Edit on GitHub