> ## Documentation Index > Fetch the complete documentation index at: https://discountkit.app/llms.txt > Use this file to discover all available pages before exploring further. # Discount Badge > A theme-agnostic max-discount badge for products and product cards DKL Discount Badge component `` is a theme-agnostic "max discount" badge — e.g. **Save up to 20%** or **Save up to \$5.00**. It's a **light-DOM** component: the label is the element's own text content (no shadow DOM), and the host element itself is styled as the badge. That keeps it dropping cleanly into a product card and painting from server-rendered markup. The amount comes from the product's [`max_reward_percent` / `max_reward_cents` metafields](/live/reference): * `max_reward_percent` — a decimal percent, rounded to a whole number (`19.6 → 20%`); * `max_reward_cents` — an integer, formatted as money via the shop's money format. Which one shows is chosen by `data-discount-type` — the percent, the cents, or **highest** (whichever saves more). The visible text is server-rendered, so it paints immediately; the component is an optional enhancement that re-composes the label and re-picks the `highest` option on a variant change. ## On this component Add **DK: Discount Badge** in the theme editor and configure it with settings — no code. The only way to render in collection product cards. Drop `` straight into your theme's Liquid and configure with `data-*`. The `data-*` attributes and `--dkl-badge-*` styling tokens shared by both. The mount / unmount lifecycle events each instance emits. Both placements need the **Discount Kit Live** app embed enabled, and render identically — the same defaults back both. See [App blocks vs. Web Components](/components/app-blocks-vs-web-components) for how to choose. The badge is otherwise **standalone** — it reads the product metafields server-side and re-picks the `highest` option on the host theme's variant-change events. It emits no discount/state event of its own, only the [mount / unmount lifecycle events](/components/discount-badge/events). ## Accessibility * **Real text.** The badge is plain, server-rendered text (e.g. "Save up to 20%") — not an image or a CSS background — so screen readers read it verbatim and it scales with browser zoom and text-size settings. * **No empty announcements.** When nothing applies, the component hides the host entirely rather than leaving an empty element for assistive tech to encounter. * **Contrast.** Because the badge colours are merchant-configurable, keep `--dkl-badge-color` and `--dkl-badge-background` at a sufficient contrast ratio when restyling.