Components · Status · E-commerce

Badge Purchase Info

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

Every example on this page is the real component. Figma: Good buy, Good to know.

Playground

E-commerce only. Choose breakpoint, type and explanation. Mobile and Desktop force the breakpoint values whatever the window width; Window follows the window.

Breakpoint
Type

Markup for this selection

HTML




Overview
A purchase info badge is a small badge with a beak (an arrow) that points at a short explanation. Good buy (red) points out a good price or deal. Good to know (grey) gives a tip about the purchase.
Use them only in an e-commerce environment promoting products.
A short summary lives here; the three pages are: Examples & Guidelines (this page), Specifications and Code.




Usage
When to use
  • Point out a good deal: “Köp 100 för 3,80 kr st, spara 1 210 kr!”.
  • Give a tip about the purchase, such as accessories that are not included.
When not to use
Do
  • Keep the label to one or two words and the text to one or two lines.
  • Put links in the text, underlined.
  • Use Good buy for deals and Good to know for tips.
Don’t
  • Put the explanation inside the badge.
  • Use another color.
  • Use it for anything that is not about buying the product.




Anatomy
  1. Label. The badge: one or two words. Red for Good buy, grey for Good to know. Breuer Condensed Bold, uppercase.
  2. Beak. The arrow. It points right, at the text, and is as high as the label (10 × 22px desktop, 8 × 18px mobile).
  3. Text. The explanation, one or two lines, beside the badge with an 8px gap. Links in it are underlined.




Variants
Bra köp
Köp 100 för 3,80 kr st, spara 1 210 kr!
Bra att veta
Köp även till KNÄSKYDD GUMMI eller KNÄSKYDD POLYETEN, de ingår inte som standard.
Good buy and Good to know.




Layout & Appearance
Badge and text
The badge sits to the left and the text to the right of it, centered vertically, with 8px between them. A longer text wraps; the badge keeps its size and the text stays beside it.
Bra att veta
Köp även till KNÄSKYDD GUMMI eller KNÄSKYDD POLYETEN, de ingår inte som standard.
A narrow container: the text wraps.
Mobile and desktop
The label is 12/12 on mobile and 14/14 on desktop. The beak is 8 × 18px on mobile and 10 × 22px on desktop.




Accessibility
The text is plain text. All requirements are listed under Accessibility Requirements in Specifications.
Screen reader support
The label and the text are read in order. The beak is decorative and empty. Links in the text are normal links: underlined, with a visible focus.
Not interactive
The badge is never a link or a button.







References