Skip to main content

Badge

A badge component is a short inline call-out used to attract attention or flag status, such as 'NEW', or 'SALE'. It is not interactive. However, it generally overlays interactive content or is positioned close to a commanding component or module.

Example

NEW
Badge showing "New" on a default theme

Best practices

Use the badge component when calling attention to a special deal, sale or temporary offer.

A typical use of badge includes a list of apps where it is used to highlight the “APP OF THE DAY.” Similarly, use it on a news page to notify the user that an article is “BREAKING NEWS.” It typically refers to something occurring now. For example, it could be found in a hero telling the user there are "NEW EPISODES" of a television series or on a product listing page highlighting what is “NEW TODAY” or on “SALE.” In general, it draws the user’s attention to items that are new, immediate or temporary.

Badge is built upon a strong HTML phrase tag. See the HTML text formatting page for more information on phrase tags.

Badge is most commonly used in association with product placements, track list placements, features, multi-features, and content placements.

Do

  • Use the f-lowlight style option for promotions in order to get the correct color and styling.
  • Use the f-highlight style option for things like “BREAKING NEWS.”
  • Keep the badge label short and succinct. It should not be a sentence or a long phrase. We recommend 2-3 words for a badge. Short phrases are OK. For example, "APP OF THE DAY"; but keep in mind that they will generally become longer when localized.
  • Use all caps (e.g. "SALE").
  • In general, place a badge at the top of a lockup. If the rest of the text is centered, align the badge top-centered. If text is left-justified, align the badge top-left.

Don’t

  • Do not overuse these attention-getters, as is often done on news tabloid magazine covers. If there are too many on a page, they defeat the purpose of calling attention to themselves. We recommend only 1-2 badges per page.
  • Do not use verbs in your badge. It could lead the user to think they are actionable. Instead, keep it to nouns and adjectives, if possible (e.g. "NEW" OR "NEW TODAY").

Also known as

Callout
Flag
Kicker

Related

Content placement
Hero
Kicker
Product placement

Options

  • Color:
    • Highlight: Add a class name of f-highlight to display as light.
    • Lowlight: Add a class name of f-lowlight to display a dark.
    • Accent: Add a class name of f-accent to display with a shade of your accent color. This color is determined by your brand accent color and has been changed to support specific accessibility scenarios.
    • Custom: If you need to provide a custom color, add an inline style with a hex value for the background property: style="background: #F2F2F2"
  • Size: One size is required:
    • Small: Add a class name of f-small to display as small.
    • Large: Add a class name of f-large to display as large.
  • Responsive: Add a class name of f-responsive to display as small size in viewports 1-2 and large size in viewports 3-6.

Development

  • Schema definition: The badge schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Small Badge with no background

LOREM
<strong class="c-badge f-small">LOREM</strong>

Small Badge with highlight

LOREM
<strong class="c-badge f-small f-highlight">LOREM</strong>

Small Badge with lowlight

LOREM
<strong class="c-badge f-small f-lowlight">LOREM</strong>

Small Badge with accent color

LOREM
<strong class="c-badge f-small f-accent">LOREM</strong>

Small Badge with inline background color

LOREM
<strong class="c-badge f-small" style="background: #F58C95">LOREM</strong>

Large Badge with no background

LOREM
<strong class="c-badge f-large">LOREM</strong>

Large Badge with highlight

LOREM
<strong class="c-badge f-large f-highlight">LOREM</strong>

Large Badge with lowlight

LOREM
<strong class="c-badge f-large f-lowlight">LOREM</strong>

Large Badge with accent color

LOREM
<strong class="c-badge f-large f-accent">LOREM</strong>

Large Badge with inline background color

LOREM
<strong class="c-badge f-large" style="background: #F58C95">LOREM</strong>

Responsive Badge with no background

LOREM
<strong class="c-badge f-responsive">LOREM</strong>

Responsive Badge with highlight

LOREM
<strong class="c-badge f-responsive f-highlight">LOREM</strong>

Responsive Badge with lowlight

LOREM
<strong class="c-badge f-responsive f-lowlight">LOREM</strong>

Responsive Badge with accent color

LOREM
<strong class="c-badge f-responsive f-accent">LOREM</strong>

Responsive Badge with inline background color

LOREM
<strong class="c-badge f-responsive" style="background: #F58C95">LOREM</strong>