Merge pull request #164 from ConductionNL/feature/OP-112/Download-car…

…d-nlds

Added more tokens to DownloadCard

src/components/card/downloadCard/DownloadCard.module.css

@@ -10,8 +10,12 @@
   --conduction-download-card-border-color: var(--skeleton-color-grey-2);
   --conduction-download-card-border-radius: var(--skeleton-border-radius-md);
 
+  --conduction-download-card-padding-inline-end: 14px;
+  --conduction-download-card-padding-inline-start: 14px;
+  --conduction-download-card-padding-block-end: 14px;
+  --conduction-download-card-padding-block-start: 14px;
+
   --conduction-download-card-icon-gap: 8px;
-  --conduction-download-card-padding: 14px;
 }
 
 .container {
@@ -22,7 +26,10 @@
   border-style: var(--conduction-download-card-border-style);
   border-color: var(--conduction-download-card-border-color);
   border-radius: var(--conduction-download-card-border-radius);
-  padding: var(--conduction-download-card-padding);
+  padding-inline-start: var(--conduction-download-card-padding-inline-start);
+  padding-inline-end: var(--conduction-download-card-padding-inline-end);
+  padding-block-start: var(--conduction-download-card-padding-block-start);
+  padding-block-end: var(--conduction-download-card-padding-block-end);
 }
 
 .title {

src/components/card/downloadCard/DownloadCard.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
 import * as styles from "./DownloadCard.module.css";
-import { Heading3, Link } from "@utrecht/component-library-react/dist/css-module";
+import _ from "lodash";
 import clsx from "clsx";
+import { Heading3, Link } from "@utrecht/component-library-react/dist/css-module";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faDatabase,
@@ -14,7 +15,6 @@ import {
   faFileWord,
   faFileZipper,
 } from "@fortawesome/free-solid-svg-icons";
-import _ from "lodash";
 
 interface DownloadCardProps {
   label: string;