Belt badge · Club Hub UI

Use wherever a person's current or target grade appears: lists, tables, applicant cards, profiles.

The colour comes from the club's grading system (tokens --belt-*), the label from the grading system's localised name. Two-colour belts (e.g. yellow with green tip) use tip.

The label is always shown — colour alone never carries the meaning.

Examples

Single colour

6. Kup · Grüngurt

Data

render({
  "label": "6. Kup · Grüngurt",
  "color": "green"
})

Markup

<span class="belt" style="--belt-color: var(--belt-green)">6. Kup · Grüngurt</span>

Two colours

8. Kup · Gelb-Grüngurt

Data

render({
  "label": "8. Kup · Gelb-Grüngurt",
  "color": "yellow",
  "tip": "green"
})

Markup

<span class="belt" style="--belt-color: var(--belt-yellow); --belt-tip: var(--belt-green)">8. Kup · Gelb-Grüngurt</span>

White belt (outlined)

10. Kup · Weissgurt

Data

render({
  "label": "10. Kup · Weissgurt",
  "color": "white"
})

Markup

<span class="belt" style="--belt-color: var(--belt-white)">10. Kup · Weissgurt</span>

Short form in tables

1. Dan

Data

render({
  "label": "1. Dan",
  "color": "black",
  "short": true,
  "title": "1. Dan · Schwarzgurt"
})

Markup

<span class="belt" style="--belt-color: var(--belt-black)" title="1. Dan · Schwarzgurt">1. Dan</span>

Large (profile)

4. Kup · Blaugurt

Data

render({
  "label": "4. Kup · Blaugurt",
  "color": "blue",
  "size": "lg"
})

Markup

<span class="belt" data-size="lg" style="--belt-color: var(--belt-blue)">4. Kup · Blaugurt</span>

Data contract

What render(data) accepts — validated against this JSON Schema in development and tests. Unknown fields are rejected. The same schema is in components.json.

Field	Type	Required	Default	Description
`label`	`string`	required	—	Localised grade name from the grading system, e.g. "6. Kup · Grüngurt". Shown as text. min 1 chars · e.g. `"6. Kup · Grüngurt"`, `"1. Dan"`
`color`	`"white" \| "yellow" \| "green" \| "blue" \| "red" \| "black"`	required	—	Main belt colour; maps to the token `--belt-{color}`.
`tip`	`"white" \| "yellow" \| "green" \| "blue" \| "red" \| "black"`	optional	—	Optional second colour for striped/tipped belts (e.g. yellow-green). Maps to `--belt-{tip}`.
`short`	`boolean`	optional	`false`	Compact form for dense tables: the label should then be the short grade ("6. Kup"); the full name goes into `title`.
`title`	`string`	optional	—	Full grade name as tooltip and accessible description when `short` is used.
`size`	`"sm" \| "md" \| "lg"`	optional	`"md"`	Swatch size (design guide §9.7): `sm` in list rows, `md` (24×8 px) in cards and tables, `lg` on profiles, exam results and TV screens.

JSON Schema

{
  "type": "object",
  "additionalProperties": false,
  "required": [
    "label",
    "color"
  ],
  "properties": {
    "label": {
      "type": "string",
      "minLength": 1,
      "description": "Localised grade name from the grading system, e.g. \"6. Kup · Grüngurt\". Shown as text.",
      "examples": [
        "6. Kup · Grüngurt",
        "1. Dan"
      ]
    },
    "color": {
      "type": "string",
      "enum": [
        "white",
        "yellow",
        "green",
        "blue",
        "red",
        "black"
      ],
      "description": "Main belt colour; maps to the token `--belt-{color}`."
    },
    "tip": {
      "type": "string",
      "enum": [
        "white",
        "yellow",
        "green",
        "blue",
        "red",
        "black"
      ],
      "description": "Optional second colour for striped/tipped belts (e.g. yellow-green). Maps to `--belt-{tip}`."
    },
    "short": {
      "type": "boolean",
      "default": false,
      "description": "Compact form for dense tables: the label should then be the short grade (\"6. Kup\"); the full name goes into `title`."
    },
    "title": {
      "type": "string",
      "description": "Full grade name as tooltip and accessible description when `short` is used."
    },
    "size": {
      "type": "string",
      "enum": [
        "sm",
        "md",
        "lg"
      ],
      "default": "md",
      "description": "Swatch size (design guide §9.7): `sm` in list rows, `md` (24×8 px) in cards and tables, `lg` on profiles, exam results and TV screens."
    }
  }
}

Markup & states

Root: span.belt — usable without render() by writing the markup directly.

Attributes

Attribute	Values	Default	Description
`data-size`	`sm \| lg`	`(none = md, 24×8 px swatch)`	Swatch size.
`style="--belt-color: var(--belt-…)"`	`one of the --belt-* tokens`	—	Main colour (set by `render`).
`style="--belt-tip: var(--belt-…)"`	`one of the --belt-* tokens`	—	Second colour for tipped belts.
`title`	`text`	—	Full grade name when the short label is used.

Parts

Part	Description
`::before`	The swatch (24×8 px at md, `--radius-sm`), drawn by CSS with a 1 px inset outline (`--belt-edge`) so white, yellow and black belts stay visible on any surface.

CSS custom properties

Property	Default	Description
`--belt-color`	`var(--belt-white)`	Main colour of the swatch.
`--belt-tip`	`same as --belt-color`	Colour of the last 30 % of the swatch.

Accessibility

The grade name is real text; the swatch is decorative.
Never render a swatch without text, even in dense tables — use the short label instead.

Guidance

DoTake the label and colours from the club's grading system, never hard-code belt names.

DoUse the short form only in tables where the column header says "Gurt".

Don'tDon't use belt colours for anything other than grades.

Don'tDon't mix vocabularies ("8 - Yellow" next to "7. Kup") — that was one of the audit's top problems.

Related: Stripe chips · List · Table