Components · Status · E-commerce

Badge Product & Discount

Product and Discount badges are e-commerce badges.

How to add them to a page. The file is components/css/badge.css.

Basic Usage

Link the shared file once per page. Never copy the rules.

StepWhat to do
1. Link<link rel="stylesheet" href="/components/css/badge.css">. Both templates already have it.
2. ChooseClass badge-promo (Discount), badge-promo--closing or badge-promo--product.
3. GroupPut Discount and Closing sale in badge-promo-group (next to each other) or badge-promo-stack (stacked).

Product & Discount

API

Classes

ClassUse
badge-promoThe badge. Red: Discount.
badge-promo--closingBlack: Closing sale.
badge-promo--productGrey with a border: Product.
badge-promo__iconThe icon (Material Symbols name as text, aria-hidden="true"), 14px.
badge-promo-groupWrapper: badges next to each other.
badge-promo-stackWrapper: badges stacked, left-aligned.

Things to know

  • E-commerce only.
  • The label is written in sentence case; the CSS makes it upper case.
  • Closing sale only together with a Discount badge.

CSS / Tailwind

The component is one CSS file, shared by every page. Link it, never copy it.

CSS (components/css/badge.css)