KKS-35 — Infobox / CTA
Both components in this ticket are compositions of options that already exist. Nothing here needed a new content element; the point of this page is to write the recipe down.
The infobox is a plain Text element with a background chosen in Appearance → Background colour. The three looks Figma draws are three existing values:
navy "Teilnahmebedingungen" 311-23267 -> background_color_class = primary warm newsletter CIRCULAR 308-21514 -> background_color_class = gradientwarm sand event sidebar 311-23267 -> background_color_class = quaternary
The CTA is a Text & Image element with four fields set: header_style = fancy plus a subheader for the pill badge (KKS-19), an RTE link styled Button Primary + Arrow for the arrow button (KKS-17), imageorient = 25 for the image on the right (KKS-36), and the radius-top-right frame option (KKS-20).
Read off the navy band in Figma: full bleed #192E5F with content at the 1080 box, heading H4 / Figtree 700 / 31px / 100%, body 13px / 130% white, padding 51px top and 59px bottom.
Teilnahmebedingungen
Die Teilnahme an den angebotenen Kursen und Veranstaltungen richtet sich nach den jeweils in der Ausschreibung angegebenen Voraussetzungen. Bitte informieren Sie sich vor Ihrer Anmeldung über Inhalte, Zielgruppe und Teilnahmevoraussetzungen.
English note, not part of the design: this is the reference case. The band is full bleed while the text sits on the 1080 content box — which is what frame-background-primary already does, so no new rule was needed. Check the padding against Figma’s 51 / 59:
var f = document.querySelector('#c93510'), s = getComputedStyle(f);
[s.backgroundColor, s.paddingTop, s.paddingBottom].join(' | ');
// expect "rgb(25, 46, 95) | …" — #192E5F is $primary
Der Newsletter CIRCULAR ist ein kostenloses Serviceangebot des KKS-Netzwerks.
Hier erfahren Sie Wissenswertes rund um klinische Prüfungen, nationale und internationale Regularien, aktuelle Projekte und Veranstaltungen.
English note: Figma gives this one no heading at all — the bold first line is body copy, so header_layout = 100 (hidden) is correct rather than an empty H4. Same element as above, one field different: gradientwarm instead of primary.
Hinweis
Der sand-farbene Kasten ist quaternary — #FEEFE9, die helle Stufe der Orange-Rampe.
Scope note: in Figma this treatment appears as the right sidebar of the course detail page (311-23267), with small-caps $tertiary labels over navy values. That sidebar is rendered by sf_event_mgt, which is KKS-32 — blocked on Thomas deciding between eventnews and sf_event_mgt. Only the colour treatment belongs here; the label/value layout is built there and consumes this.
Worth a contrast check: $quaternary-* is deliberately flat, so a label needs $tertiary-700 or $primary on this background, not a mid step of the sand ramp.
Gemeinsam die klinische Forschung weiterentwickeln
Sprechen Sie uns an
Das KKS-Netzwerk steht für Austausch, Qualität und kontinuierliche Weiterentwicklung. Gemeinsam mit seinen Mitgliedern und Partnern setzt sich das Netzwerk dafür ein, die Rahmenbedingungen für patientenorientierte klinische Forschung in Deutschland nachhaltig zu verbessern.
English note: the pill badge above the H2 is the subheader field with header_style = fancy (KKS-19). The button is the RTE style Button Primary + Arrow, whose badge inverts the surface — solid navy button, white badge, navy arrow (KKS-17). Image right is imageorient 25 on the one-third column from KKS-36, and the rounded corner is radius-top-right from KKS-20, on the outer edge away from the text.
Panel — info
panel_class = info. $info now serves #FEEFE9 after KKS-17, not the stale #319fc0 a TypoScript constant used to inject.
Panel — primary
panel_class = primary. Header $primary, border darken($primary, 10%) — the darken() call is what the restyle needs to replace with a ramp step.
Panel — tertiary
panel_class = tertiary. Orange header; check the header text contrast, which color-contrast() currently decides.
Panel — info inside a quaternary frame
The case from Kostas’ ticket comment: card/_cardpanel.scss:125 sets background-color: $quaternary-700 !important here, but $quaternary-* is deliberately flat, so the override is a no-op. It either goes, or becomes $tertiary-300 / $tertiary-700 on purpose.
Well
A .well. Currently rgba(0, 0, 0, .05) with padding: $spacer * 2 — a hardcoded grey wash that belongs to no palette. Compare it against the sand infobox above and it is obvious which one the rebrand wants.