KKS-31 — Card grid / news listing
Figma 303-19820, frame »KKS-Netzwerk-Stellungnahmen«. The grid is Frame 156 (Flow Grid, 1080px, 3×3, column gap 20px, row gap 50px) and the card is Frame 69 (Vertical, Fill 346.67px, gap 20px).
The grid is not new: it reuses $contentcontainer-gap-multi-x / -y, the 3+-column tokens KKS-25 established from this same frame. Nor are the colours or type — #F55E21 is $tertiary, #0C172F is $body-color, 20/120 is $h6-font-size + $line-height-h6, 18/150 is $font-size-base + $line-height-base.
The card deliberately has no fill, no border and no padding — it sits straight on the section band, so the frame owns the surface. That is the opposite of card/_cardgroup.scss, which fills its cards and adds a footer bar; that component is untouched and still serves the card_group CE.
Hier finden Sie unsere Pressemitteilungen:
templateLayout 13 (»Presse Liste«) with pagination on, so the items sit in .news-panel and the grid goes on the panel — never on the view, or the pager would become a grid cell.
Dieselbe Karte in der News-Liste
templateLayout 11 (»News Liste«) with hidePagination = 1. There is no .news-panel in that case and the articles are direct children of the view, which is what the :not(:has(.news-panel)) guard in _news.scss covers. Both listings must produce an identical card.
Worauf beim Abgleich mit Figma zu achten ist
- The date is a pill, and it is first.
Partials/List/Item.htmlemits the date last, inside.footer; nine othertemplateLayoutvariants share that partial, so the order is corrected withorder: -1rather than by moving the DOM node. - The date format was a defect. The partial rendered
<f:format.date format="H-m">— hour-minute, so the list showed »14-03«. Nowd.m.Y, as in the design. - Weight 700, not 800. Figma’s H6 and the read-more link are both Figtree 700, but the theme has no 700 step:
$font-weight-boldis 800 and so is$h6-font-weight. The weight is therefore local to this component ($news-card-font-weight) rather than restyling every heading site-wide. Worth a decision: should$h6-font-weightbecome 700 globally? - The arrow reuses the existing tertiary icon. Figma draws a 12px vector with a 1.5px stroke;
--sp-icon-list-arrow-kks--tertiaryis already the right colour and shape family, so no new icon variant was added. - The read-more link carries
.btn. Its metrics are zeroed through the KKS-17--bs-btn-*custom properties instead of fighting them withpaddingoverrides. - Untouched: the pager, the news detail view, and the
boxes/isotop/ event / teaser-slider listings, which keep their own layouts.