KKS-19 — Fancy subheader placement
Set Appearance → Header style = fancy and fill the subheader field. The subheader then renders as the outlined pill badge from Figma, sitting above the headline.
Spec, read off nodes 409-10532 (white background) and 409-10578 (gradient): radius 100px, border 1px, height fixed 24px, padding 5px 15px, Figtree 500 at 12px, line-height 100 %, letter-spacing 25 %, uppercase. 12 + 5 + 5 + 2×1 = 24, so the fixed height is the padding box exactly.
The two Figma instances differ in one value: border and text are #192E5F on white and #FFFFFF on the gradient. Both are the frame’s own text colour, so the badge uses currentColor and themes itself across all 13 backgrounds — no per-variant rule.
Measure it:
var b = document.querySelector('.element-subheader.fancy'), s = getComputedStyle(b);
[s.borderRadius, s.borderWidth, s.height, s.padding, s.fontSize, s.letterSpacing, s.textTransform].join(' | ');
// expect "100px | 1px | 24px | 5px 15px | 12px | 3px | uppercase"
Wir sind das KKS-Netzwerk
Unser Profil
The reference case — Figma node 409-10532 on the Startseite artboard, badge 146×24 at Left 100, Top 1569, directly above this H2. Border and text are #192E5F, which is $primary and also this frame’s --frame-color.
Im Verein KKS-Netzwerk e. V. (KKSN) haben sich Koordinierungszentren für klinische Studien (KKS) und Zentren für klinische Studien (ZKS) zusammengeschlossen.
Wissen gestalten. Orientierung geben.
Unsere Themen
Figma node 409-10578, the same badge on the warm gradient: 166×24 at Left 650, Top 2203. Every geometry value is identical to the white case — radius 100, border 1, height 24, padding 5/15, Figtree 500 12px/100%/25% uppercase. Only the colour flips, to #FFFFFF.
That is why the badge is built on currentColor rather than a token: it inherits --frame-color, which $frame-backgrounds already defines per background. The vector option from KKS-14 is ticked here too, so the two frame features can be seen composing.
Navy frame
Unser Profil
primary — white text, so a white badge, from the same one rule.
Cool gradient frame
Unsere Themen
gradientcool — navy to mint, white text, white badge.
Dark frame
Einblicke
dark — the grey field, again white text and a white badge.
Lighter grey frame
Aktuelles
lightergrey — a light field, so the badge goes back to the dark body colour. Worth a contrast check: this is the case where an $primary-only badge would have been wrong.
Control — header style none
This subheader is not a badge
Same subheader field, header_style = none. It must keep rendering as the plain lead paragraph via .element-subheader:not(.fancy) — the badge rule must not leak onto it.
Long label
Koordinierungszentren fuer klinische Studien und Zentren fuer klinische Studien
Figma only ever shows short labels (146px and 166px wide, both one line). This one is deliberately far too long, to show what a badge does when it cannot fit on one line at 375px. The height is fixed 24px in Figma; a wrapping label would burst it, so the implementation lets the badge grow instead of clipping the text — legibility over the fixed height. Flagged rather than decided silently.