Skip to main navigation Skip to main content Skip to page footer
KKSN KKSN

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.html emits the date last, inside .footer; nine other templateLayout variants share that partial, so the order is corrected with order: -1 rather 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«. Now d.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-bold is 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-weight become 700 globally?
  • The arrow reuses the existing tertiary icon. Figma draws a 12px vector with a 1.5px stroke; --sp-icon-list-arrow-kks--tertiary is 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 with padding overrides.
  • Untouched: the pager, the news detail view, and the boxes / isotop / event / teaser-slider listings, which keep their own layouts.
privacy settings
KKSN KKSN