Components · Status · E-commerce

Badge Purchase Info

A purchase info badge is a badge with a beak that introduces a short purchase tip.

How to add it 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. BuildA badge-purchase with a __tag (label + beak) and a __text.
3. ChooseGood buy is the default. Add badge-purchase--know for Good to know.

Purchase Info

API

Classes

ClassUse
badge-purchaseThe wrapper: badge and text, centered, 8px gap. Good buy (red).
badge-purchase--knowGood to know (grey).
badge-purchase__tagLabel and beak together.
badge-purchase__labelThe label. Text in sentence case; the CSS makes it upper case.
badge-purchase__beakThe beak. Empty element.
badge-purchase__textThe explanation. Links inside are underlined.

Things to know

  • E-commerce only.
  • The color is set by the custom property --badge-purchase-bg on the wrapper.

CSS / Tailwind

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

CSS (components/css/badge.css)