KKS-13 — News Teaser Slider
Figma 232-3398, the »Neues aus dem Netzwerk« row. The cards are KKS-31’s news card; what this ticket adds is the slider around them.
Track: the card frames are all Fixed 347px at Top 1012, Left 100 / 467 / 834 / 1199. Spacing 367 means a 20px gap — the same token KKS-25, KKS-31 and KKS-21 use — and 3 × 347 + 2 × 20 = 1081, the 1080px content box.
The 4th card starts at 1199 inside a 1280 frame, so ~81px of it shows past the content box. The track is deliberately not clipped: three cards plus a sliver of the next is what signals that it scrolls.
Ausführlicher Text zur Pressemitteilung.
Worauf beim Abgleich mit Figma zu achten ist
- Not a Bootstrap carousel. The design steps by one card while showing three, and draws four dots for six items (6 − 3 + 1 = 4). Bootstrap moves one whole
.carousel-itemat a time and cannot show three at once, so the track is a nativescroll-snapcontainer — which also gets touch, trackpad and keyboard for free. No fifth slider library, per the roadmap. - The chrome is inverted from the home slider. KKS-21 set the base carousel chrome to a white active dot, accent idle dots and white arrows, for a coloured panel. Here the row sits on the light page background, so Figma’s
Frame 74>Frame 29uses active#F55E21=$tertiary, idle#192E5F=$primary, and navy arrows. All three are overridden. - The dot count is computed, not authored. How many dots there are depends on how many cards fit, which changes with the viewport — so the template ships an empty indicator container and
NewsTeaserSliderModulefills it. A track that does not overflow shows no chrome rather than one dead dot. - ⚠️ The pill differs from KKS-31. Figma shows a category label (PRESSEMITTEILUNG) where KKS-31’s press grid shows the date. The pill component is identical — same size, radius and tertiary outline — only the text source differs, so this still renders the date until the demo records carry categories. Worth confirming which the client wants.