Components · Status

Badge Number

A number badge is a round badge with a number or a check mark.

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.

Step	What to do
1. Link	`<link rel="stylesheet" href="/components/css/badge.css">`. Both templates already have it.
2. Choose	Class `badge-number` + a size when needed.
3. Give it context	Say what the number counts, in text next to it.

Class	Use
`badge-number`	The badge. Large by default.
`badge-number--md`, `--sm`	Medium, Small.
`badge-number__icon`	The check mark (Material Symbols name `done` as text, `aria-hidden="true"`). Its size follows the badge: 20px Large, 14px Medium, 11px (10px mobile) Small.

The size changes at 769px: Large 20px on mobile, 24px on desktop.
The docs use it for the numbered markers (DK.callouts) and the numbered lists (ds-bullets--num). The markers stay 24px at every width, as Figma's Marker.
Not the header counter: .badge is a different component.

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

CSS (components/css/badge.css)