Tags

Tag Status

These are often used to show the status and are often in a table and are sometimes tooltips.

Tag Class Tag Example Use Case
tag-status tag-gray-lightest status Seen in News
tag-status tag-gray-dark status Often used to denote terminated or inactive status.
Note: needs some research because it seems to be used interchangeably with tag-orange and tag-red for these statuses.
tag-status tag-green status Often used to denote active status
tag-status tag-blue status Not yet used in system
tag-status tag-yellow status Not yet used in system
tag-status tag-orange status
This plan is inherited and configuration is limited at this site.
 Often used to denote inherited or terminated status.
Note: needs some research because it seems to be used interchangeably with tag-gray-dark for these statuses.
tag-status tag-red status Often used to denote inactive status or highlight new content on the ee home page panels.
Note: needs some research because it seems to be used interchangeably with tag-gray-dark for inactive status.
tag-status tag-red tag-inline tag-inline Example document name Note: Needs some research. Class seems to only add margin since by default the tag-status is an inline element.
HTML
<!-- Example as Status Only -->
<span class="tag-status tag-gray-dark">status</span>

<!-- Example as a Tooltip Link -->
<a href="javascript:void(0);" class="tag-status tag-orange tooltip-link">status</a>

Tag Status - COMMUNITY ONLY - DO NOT USE ELSEWHERE

These tag statuses are specific to Community categories only and should NOT be used in other parts of the system without further discussion with UX.

Tag Class Tag Example Category
tag-status community-cat26 category Decision Support
tag-status community-cat14 category Training Materials
Note: insufficient Color Contrast of white on background color. Must use black text.
tag-status community-cat7 category Internal Docs
tag-status community-cat25 category Idea Exchange
Note: insufficient Color Contrast of white on background color. Must use black text.
tag-status community-cat13 category Training Videos
tag-status community-cat27 category Best Practices
tag-status community-cat24 category ACA
tag-status community-cat4 category EDI
tag-status community-cat6 category Implementation Tools
tag-status community-cat9 category OE Tools
tag-status community-cat15 category bSwift Marketplace
tag-status community-cat8 category Marketing Materials
tag-status community-cat1 category Release Notes
tag-status community-cat-ss category System Status

Tag Detail

These are most often used to provide additional information for a plan in Enrollment.

This example assumes that you are using the markup as illustrated below and that each link is a tooltip.

If it is not a tooltip or link, do not use the anchor tag and inspect the markup for the example without links below.

Example with all possible styles

The height of the tag details is relative to the largest element. In this case, it's the icon.

Example without icon-only

The height of the tag details is relative to the largest element. In this case, it's the icon.

Example without icons

Example without links

  • HSA
  • Medical
  • Medicare
  • RX
HTML
<ul class="wrapper-tag-detail">
    <li>
        <a href="javascript:void(0)" class="tag-detail tag-outline tooltip-link">HSA</a>
    </li>
    <li>
        <a href="javascript:void(0)" class="tag-detail tag-outline tooltip-link">
            <span class="fi fi-stethoscope fi-lg fi-before fc-green" aria-hidden="true"></span>
            Medical
        </a>
    </li>
    <li>
        <a href="javascript:void(0)" class="tag-detail tag-fill tooltip-link">Medicare</a>
    </li>
    <li>
        <a href="javascript:void(0)" class="tag-detail tag-icon-only tooltip-link">
            <span class="fi fi-2x fi-bottle-rx" aria-hidden="true"></span>
            <span class="sr-only">RX</span>
        </a>
    </li>
</ul>