KKS-21 — Homepage teaser sections
Figma 232-3398, the »Wissen gestalten. Orientierung geben.« section. Its four cards are frames 59-62, each Fixed 255px at Left 100 / 375 / 650 / 925 — so the column gap is 375 − (100 + 255) = 20px and 4 × 255 + 3 × 20 = 1080. The same content box KKS-25 and KKS-31 measured; this is the third independent confirmation of that rhythm, so no new grid was introduced.
Built on the existing card_group CType (bootstrap_package, with tx_bootstrappackage_card_group_item children). The ticket said »+ Mask CE«, but card_group is already registered and in the backend wizard, so a Mask element would duplicate it.
Region attribution: this is the only part of 232-3398 that belongs to KKS-21. The card row above it with carousel dots is KKS-13, the hero is KKS-12, the member logos KKS-15. The ticket’s second node 240-2846 turned out to be »Startseiten Header« — three hero slider variants, entirely KKS-12’s. It was tagged here by text coincidence: slider variant 2 carries this same headline.
Wissen gestalten. Orientierung geben.
Gemeinsam Strukturen entwickeln und Positionen stärken
Curricula
Zukunftsorientierte Curricula und Bildungsangebote mit klaren Strukturen und praxisnahen Inhalten.
Vertragsgestaltung
Rechtssichere Verträge und Vereinbarungen mit klaren Regelungen und praxistauglichen Lösungen.
Stellungnahmen
Fundierte Stellungnahmen zu politischen, regulatorischen und wissenschaftlichen Fragestellungen.
Fach- und Positionspapiere
Fach- und Positionspapiere mit fundierten Inhalten, klaren Botschaften und strategischer Ausrichtung.
Worauf beim Abgleich mit Figma zu achten ist
- The image sits between the text and the footer, not on top: Frame 27 (237px) → Rectangle 10 (160px) → Frame 58 (47px) = Hug 444px. The template emits
.card-img-topfirst and Bootstrap’s.cardis already a flex column, so this is done withorder— moving the markup would make thecard-img-topclass name a lie about where the image is. - The card radius is 10px, but
$border-radiusis0in this theme, so Bootstrap’s$card-border-radiuscannot supply it.overflow: hiddenon the card is what makes the body’s top corners and the footer bar’s bottom corners follow it. - The footer colour needed no change. Figma’s
Blau #192E5Fis what$primary-700already resolves to — the ramp step and$primaryare the same value in this theme. - Title and text are
$primary, not$body-color. This card and the KKS-31 news card share the H6 / Fließtext type styles but use different colour styles (#192E5Fhere,#0C172Fthere). Two deliberate styles in the design, not a mistake to normalise. - Weight 500 again. The footer link is Figtree 500; the theme’s scale is 300/400/600/800 and
$font-weight-mediumis 400, so the weight is stated locally — same gap KKS-31 hit. $cardgroup-gapwas$spacer(1.33rem ≈ 21.28px) and is now 20px per Figma. That variable also feeds.tna-flip-group, so flip cards tighten by ~1.3px.
Home slider — Figma 240-2951 / 240-2846
Chrome (240-2951, Frame 29): prev arrow, Frame 89 with three dots, next arrow — cluster gap 10px, dot gap 5px, dots 9×9px circles, active #FFFFFF, idle Gelb #FFA927 = $amber, arrows 7px with a 1px white border. The arithmetic fixes the dot count: 3×9 + 2×5 = 37 = Frame 89 Hug, and 7+10+37+10+7 = 71 = Frame 29 Fixed.
Panel (Rectangle 94): 1146×213 at left 30 / top 439 of a 1206×689 slide, so 30px in from both edges with 26 / 30 / 38 / 32 padding and 37px clear of the bottom. Headline 54px / 106% / 700, subheader 32px / 127% / 400 right-aligned, CTA 246×37.
The three slides below are the three variants of 240-2846, and they differ in one property — the panel fill. Each already existed in the theme: gradientwarm ($gradient-verlauf) = Default, gradientcool ($gradient-verlauf-2) = Variant2, amber ($amber) = Variant3. They are carousel-item layout values, so an editor picks the variant from a dropdown.
The CTA needed no work. Figma’s 246×37 pill with padding 8/10/8/30, gap 20 and a 21px badge is KKS-17’s .btn-arrow — 37 − 8 − 8 = 21 = $btn-arrow-badge-size. Only the class had to be added to the partial.
⚠️ Both arrow vectors carry a #1C1C2F fill that never renders — only the border does. Reading the fill swatch in Figma gives a dark arrow.
⚠️ This demo exists because the chrome is invisible without it: the live homepage carousel has a single slide, and the controls only render above one.