Merge pull request #109 from jeffreylauwers/feature/card

feat(Card): voeg row-gap toe aan CardBody voor consistente kinderafstand

Author: jeffreylauwers

packages/components-html/src/card/card.css

@@ -55,10 +55,19 @@
 /* Card body — groeit zodat footer altijd onderaan blijft */
 .dsn-card__body {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsn-card-body-row-gap);
   padding-block: var(--dsn-card-body-padding-block);
   padding-inline: var(--dsn-card-body-padding-inline);
 }
 
+/* Inline-elementen in de body (badges, tags) nemen hun eigen breedte — niet full-width */
+.dsn-card__body > .dsn-status-badge,
+.dsn-card__body > .dsn-dot-badge {
+  align-self: flex-start;
+}
+
 /* Card footer — uitgelijnde onderkant */
 .dsn-card__footer {
   padding-block-end: var(--dsn-card-footer-padding-block-end);
@@ -108,7 +117,7 @@
   color: var(--dsn-card-heading-color);
   text-wrap: balance;
   margin-block-start: 0;
-  margin-block-end: var(--dsn-card-heading-margin-block-end);
+  margin-block-end: 0;
 }
 
 /* Link in de heading — erft kleur en maakt de card klikbaar via stretched link */

packages/design-tokens/src/tokens/components/card.json

@@ -46,6 +46,11 @@
           "value": "{dsn.space.inline.xl}",
           "type": "spacing",
           "comment": "Horizontale padding van de card body (16px)"
+        },
+        "row-gap": {
+          "value": "{dsn.space.block.lg}",
+          "type": "spacing",
+          "comment": "Verticale ruimte tussen directe kinderen van de card body (12px)"
         }
       },
       "footer": {
@@ -97,11 +102,6 @@
           "value": "{dsn.text.line-height.lg}",
           "type": "lineHeight",
           "comment": "Regelafstand van de card heading"
-        },
-        "margin-block-end": {
-          "value": "{dsn.space.block.lg}",
-          "type": "spacing",
-          "comment": "Afstand onder de card heading (12px)"
         }
       },
       "group": {