Badges

Best Practices

Overview

A badge is a temporary visual element that can be used to indicate new priority content or to indicate when existing priority content has been updated. Each badge displays next to a link for two weeks. After two weeks, the badge disappears but the associated link remains.  

Screen Capture of a badge used in a Navigation Button

General Guidelines

Badges can be used in list modules, navigation buttons, and card sections, and textbox modules.

  • Add a badge only before link text or the module title field.
  • Use badges sparingly (no more than a few on a page) and only for priority content that needs to be promoted or elevated. 

Badges should NOT be used in the following components, modules, or content areas. 

  • Headings or titles of topics / sections 
  • Buttons (not to be confused with navigation buttons) 

Currently badges are not supported in the following instances but will be in future updates. 

  • Title fields of text modules
  • Caret link lists

Examples

List in Text Box Module

Badges in lists must be added to an individual list item before the link.

Image showing a badge applied to a List Module Item

Navigation Buttons

Badges in Navigation Buttons must be added before the title text. 

Screen shot example of badges applied to Navigation Buttons

Text Box Modules

Badges in Text Box Modules must be added to the beginning of the Body text, or used for individual features with one link only.

Screen Capture of Text Box Modules featuring badges