From b8a8b9f247a3672640585f0d0ea1ffc87d3a4a7e Mon Sep 17 00:00:00 2001
From: Norton Andreev <norton@nortonandreev.com>
Date: Wed, 17 Apr 2024 15:35:58 +0300
Subject: [PATCH] web-wallet: Replace Card component Resolves #1295, Resolves
 #1650

---
 .../ExistingWalletNotice.svelte               |  10 +-
 .../src/lib/components/Stake/Stake.svelte     |   9 +-
 .../__snapshots__/Stake.spec.js.snap          |  41 ++-
 web-wallet/src/lib/containers/Cards/Card.css  |  11 +
 .../containers/Cards/IconHeadingCard.svelte   |  29 ++
 .../containers/Cards/ToggleableCard.svelte    |  35 ++
 web-wallet/src/lib/containers/Cards/index.js  |   2 +
 .../__tests__/IconHeadingCard.spec.js         |  28 ++
 .../__tests__/ToggleableCard.spec.js          |  40 +++
 .../IconHeaderToggleCard.spec.js.snap         | 124 +++++++
 .../IconHeadingCard.spec.js.snap              |  59 ++++
 .../__snapshots__/ToggleableCard.spec.js.snap | 120 +++++++
 .../src/lib/dusk/components/Card/Card.svelte  |  37 +-
 .../dusk/components/__tests__/Card.spec.js    |  12 +-
 .../__tests__/__snapshots__/Card.spec.js.snap |   9 +
 .../lib/dusk/components/dusk.components.d.ts  |   2 +
 .../(welcome)/forced-logout/+page.svelte      |  25 +-
 .../__tests__/__snapshots__/page.spec.js.snap |  67 ++--
 .../src/routes/(welcome)/login/+page.svelte   |  12 +-
 .../__tests__/__snapshots__/page.spec.js.snap |  82 +++--
 .../src/routes/(welcome)/setup/AllSet.svelte  |   8 +-
 .../(welcome)/setup/PasswordSetup.svelte      |   7 +-
 .../(welcome)/setup/TermsOfService.svelte     |   7 +-
 .../setup/create/MnemonicPhrase.svelte        |  16 +-
 .../setup/create/MnemonicPreSetup.svelte      |  11 +-
 .../setup/create/MnemonicValidate.svelte      |  13 +-
 .../__tests__/__snapshots__/page.spec.js.snap | 325 +++++++++++-------
 .../setup/restore/MnemonicAuthenticate.svelte |  11 +-
 .../__tests__/__snapshots__/page.spec.js.snap |  83 +++--
 .../routes/components-showcase/Cards.svelte   |  21 +-
 web-wallet/src/style/dusk-components/card.css |  31 +-
 31 files changed, 920 insertions(+), 367 deletions(-)
 create mode 100644 web-wallet/src/lib/containers/Cards/Card.css
 create mode 100644 web-wallet/src/lib/containers/Cards/IconHeadingCard.svelte
 create mode 100644 web-wallet/src/lib/containers/Cards/ToggleableCard.svelte
 create mode 100644 web-wallet/src/lib/containers/Cards/index.js
 create mode 100644 web-wallet/src/lib/containers/__tests__/IconHeadingCard.spec.js
 create mode 100644 web-wallet/src/lib/containers/__tests__/ToggleableCard.spec.js
 create mode 100644 web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeaderToggleCard.spec.js.snap
 create mode 100644 web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeadingCard.spec.js.snap
 create mode 100644 web-wallet/src/lib/containers/__tests__/__snapshots__/ToggleableCard.spec.js.snap

diff --git a/web-wallet/src/lib/components/ExistingWalletNotice/ExistingWalletNotice.svelte b/web-wallet/src/lib/components/ExistingWalletNotice/ExistingWalletNotice.svelte
index 93fde8a51b..62fcab5c50 100644
--- a/web-wallet/src/lib/components/ExistingWalletNotice/ExistingWalletNotice.svelte
+++ b/web-wallet/src/lib/components/ExistingWalletNotice/ExistingWalletNotice.svelte
@@ -1,6 +1,7 @@
 <script>
-  import { Button, Card } from "$lib/dusk/components";
+  import { Button } from "$lib/dusk/components";
   import { AppAnchorButton } from "$lib/components";
+  import { IconHeadingCard } from "$lib/containers/Cards";
   import { mdiAlertOutline } from "@mdi/js";
 
   /** @type {boolean} */
@@ -8,7 +9,10 @@
 </script>
 
 <section>
-  <Card iconPath={mdiAlertOutline} heading="Existing Wallet Detected">
+  <IconHeadingCard
+    heading="Existing Wallet Detected"
+    iconPath={mdiAlertOutline}
+  >
     <p>
       Initializing a new wallet will replace your existing local wallet cache,
       erasing any stored data. Ensure you have securely backed up your current
@@ -30,7 +34,7 @@
         }}
       />
     </div>
-  </Card>
+  </IconHeadingCard>
 </section>
 
 <style lang="postcss">
diff --git a/web-wallet/src/lib/components/Stake/Stake.svelte b/web-wallet/src/lib/components/Stake/Stake.svelte
index f296eeb7db..0fdb8922e7 100644
--- a/web-wallet/src/lib/components/Stake/Stake.svelte
+++ b/web-wallet/src/lib/components/Stake/Stake.svelte
@@ -17,7 +17,6 @@
     Agreement,
     Badge,
     Button,
-    Card,
     Icon,
     Textbox,
     Wizard,
@@ -33,6 +32,8 @@
     OperationResult,
   } from "$lib/components";
 
+  import { IconHeadingCard } from "$lib/containers/Cards";
+
   import StakeOverview from "./StakeOverview.svelte";
 
   /** @type {(...args: any[]) => Promise<string>} */
@@ -171,10 +172,10 @@
           }}
         >
           <Badge text="WARNING" variant="warning" />
-          <Card
+          <IconHeadingCard
             onSurface
-            iconPath={mdiAlertOutline}
             heading="Only stake if you have a node set up!"
+            iconPath={mdiAlertOutline}
           >
             <p class="staking-warning">
               I understand that I have set up a node properly, as described <AppAnchor
@@ -192,7 +193,7 @@
               label="Don't show this step again."
               bind:checked={hideStakingNoticeNextTime}
             />
-          </Card>
+          </IconHeadingCard>
         </WizardStep>
       {/if}
 
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap
index 05c7680741..0606a13782 100644
--- a/web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap
@@ -269,28 +269,32 @@ exports[`Stake > should render the Stake notice 1`] = `
     </span>
      
     <div
-      class="dusk-card dusk-card--on-surface"
+      class="dusk-card dusk-card--gap-default dusk-card--on-surface"
     >
       <header
-        class="dusk-card__header"
+        class="card__header"
+        slot="header"
       >
-        <svg
-          class="dusk-icon dusk-icon--size--normal dusk-card__icon"
-          role="graphics-symbol"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
-          />
-        </svg>
-        
-         
-        <h3
-          class="h4"
+        <div
+          class="card__header-title"
         >
-          Only stake if you have a node set up!
-        </h3>
-         
+          <svg
+            class="dusk-icon dusk-icon--size--normal"
+            role="graphics-symbol"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
+            />
+          </svg>
+          
+           
+          <h3
+            class="h4"
+          >
+            Only stake if you have a node set up!
+          </h3>
+        </div>
       </header>
        
       <p
@@ -326,6 +330,7 @@ exports[`Stake > should render the Stake notice 1`] = `
           Don't show this step again.
         </label>
       </div>
+       
     </div>
     
      
diff --git a/web-wallet/src/lib/containers/Cards/Card.css b/web-wallet/src/lib/containers/Cards/Card.css
new file mode 100644
index 0000000000..acdf3d0068
--- /dev/null
+++ b/web-wallet/src/lib/containers/Cards/Card.css
@@ -0,0 +1,11 @@
+.card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card__header-title {
+  display: flex;
+  gap: var(--small-gap);
+  align-items: center;
+}
diff --git a/web-wallet/src/lib/containers/Cards/IconHeadingCard.svelte b/web-wallet/src/lib/containers/Cards/IconHeadingCard.svelte
new file mode 100644
index 0000000000..6170ec3549
--- /dev/null
+++ b/web-wallet/src/lib/containers/Cards/IconHeadingCard.svelte
@@ -0,0 +1,29 @@
+<script>
+  import { Card, Icon } from "$lib/dusk/components";
+
+  import "./Card.css";
+
+  /** @type {string | undefined} */
+  export let iconPath = undefined;
+
+  /** @type {string} */
+  export let heading;
+
+  /** @type {CardGap} */
+  export let gap = "default";
+
+  /** @type {boolean} */
+  export let onSurface = false;
+</script>
+
+<Card {...$$restProps} {gap} {onSurface}>
+  <header slot="header" class="card__header">
+    <div class="card__header-title">
+      {#if iconPath}
+        <Icon path={iconPath} />
+      {/if}
+      <h3 class="h4">{heading}</h3>
+    </div>
+  </header>
+  <slot />
+</Card>
diff --git a/web-wallet/src/lib/containers/Cards/ToggleableCard.svelte b/web-wallet/src/lib/containers/Cards/ToggleableCard.svelte
new file mode 100644
index 0000000000..1edc149b60
--- /dev/null
+++ b/web-wallet/src/lib/containers/Cards/ToggleableCard.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { Card, Icon, Switch } from "$lib/dusk/components";
+
+  import "./Card.css";
+
+  /** @type {string | undefined} */
+  export let iconPath = undefined;
+
+  /** @type {string} */
+  export let heading;
+
+  /** @type {CardGap} */
+  export let gap = "default";
+
+  /** @type {boolean} */
+  export let onSurface = false;
+
+  /** @type {boolean} */
+  export let isToggled = false;
+</script>
+
+<Card {...$$restProps} {gap} {onSurface}>
+  <header slot="header" class="card__header">
+    <div class="card__header-title">
+      {#if iconPath}
+        <Icon path={iconPath} />
+      {/if}
+      <h3 class="h4">{heading}</h3>
+    </div>
+    <Switch onSurface bind:value={isToggled} />
+  </header>
+  {#if isToggled}
+    <slot />
+  {/if}
+</Card>
diff --git a/web-wallet/src/lib/containers/Cards/index.js b/web-wallet/src/lib/containers/Cards/index.js
new file mode 100644
index 0000000000..11b216ac43
--- /dev/null
+++ b/web-wallet/src/lib/containers/Cards/index.js
@@ -0,0 +1,2 @@
+export { default as IconHeadingCard } from "./IconHeadingCard.svelte";
+export { default as ToggleableCard } from "./ToggleableCard.svelte";
diff --git a/web-wallet/src/lib/containers/__tests__/IconHeadingCard.spec.js b/web-wallet/src/lib/containers/__tests__/IconHeadingCard.spec.js
new file mode 100644
index 0000000000..b8567e77b5
--- /dev/null
+++ b/web-wallet/src/lib/containers/__tests__/IconHeadingCard.spec.js
@@ -0,0 +1,28 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+import { IconHeadingCard } from "../Cards";
+
+describe("IconHeadingCard", () => {
+  afterEach(cleanup);
+
+  it("renders the IconHeadingCard component with a heading", () => {
+    const { container } = render(IconHeadingCard, {
+      props: {
+        heading: "My Card",
+      },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("renders the IconHeadingCard component with a heading and an icon", () => {
+    const { container } = render(IconHeadingCard, {
+      props: {
+        heading: "My Card",
+        iconPath: "M3,3H21V21H3V3M5,5V19H19V5H5Z",
+      },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/web-wallet/src/lib/containers/__tests__/ToggleableCard.spec.js b/web-wallet/src/lib/containers/__tests__/ToggleableCard.spec.js
new file mode 100644
index 0000000000..e614c0dc71
--- /dev/null
+++ b/web-wallet/src/lib/containers/__tests__/ToggleableCard.spec.js
@@ -0,0 +1,40 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+import { ToggleableCard } from "../Cards";
+
+describe("IconHeadingCard", () => {
+  afterEach(cleanup);
+
+  it("renders the ToggleableCard component with a heading", () => {
+    const { container } = render(ToggleableCard, {
+      props: {
+        heading: "My Card",
+      },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("renders the ToggleableCard component with a heading and an icon", () => {
+    const { container } = render(ToggleableCard, {
+      props: {
+        heading: "My Card",
+        iconPath: "M3,3H21V21H3V3M5,5V19H19V5H5Z",
+      },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("renders the ToggleableCard component with a toggle", () => {
+    const { container } = render(ToggleableCard, {
+      props: {
+        heading: "My Card",
+        iconPath: "M3,3H21V21H3V3M5,5V19H19V5H5Z",
+        isToggled: true,
+      },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeaderToggleCard.spec.js.snap b/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeaderToggleCard.spec.js.snap
new file mode 100644
index 0000000000..542a8b890d
--- /dev/null
+++ b/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeaderToggleCard.spec.js.snap
@@ -0,0 +1,124 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`IconHeaderToggleCard > renders the IconHeaderToggleCard component with a heading 1`] = `
+<div>
+  <div
+    class="dusk-card dusk-card--gap-default"
+  >
+    <header
+      class="card__header"
+      slot="header"
+    >
+      <div
+        class="card__header-title"
+      >
+         
+        <h3
+          class="h4"
+        >
+          My Card
+        </h3>
+      </div>
+       
+    </header>
+     
+    
+     
+  </div>
+  
+  <!--&lt;Card&gt;-->
+  <!--&lt;IconHeaderToggleCard&gt;-->
+</div>
+`;
+
+exports[`IconHeaderToggleCard > renders the IconHeaderToggleCard component with a heading and an icon 1`] = `
+<div>
+  <div
+    class="dusk-card dusk-card--gap-default"
+  >
+    <header
+      class="card__header"
+      slot="header"
+    >
+      <div
+        class="card__header-title"
+      >
+        <svg
+          class="dusk-icon dusk-icon--size--normal"
+          role="graphics-symbol"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M3,3H21V21H3V3M5,5V19H19V5H5Z"
+          />
+        </svg>
+        
+        <!--&lt;Icon&gt;-->
+         
+        <h3
+          class="h4"
+        >
+          My Card
+        </h3>
+      </div>
+       
+    </header>
+     
+    
+     
+  </div>
+  
+  <!--&lt;Card&gt;-->
+  <!--&lt;IconHeaderToggleCard&gt;-->
+</div>
+`;
+
+exports[`IconHeaderToggleCard > renders the IconHeaderToggleCard component with a toggle 1`] = `
+<div>
+  <div
+    class="dusk-card dusk-card--gap-default"
+  >
+    <header
+      class="card__header"
+      slot="header"
+    >
+      <div
+        class="card__header-title"
+      >
+        <svg
+          class="dusk-icon dusk-icon--size--normal"
+          role="graphics-symbol"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M3,3H21V21H3V3M5,5V19H19V5H5Z"
+          />
+        </svg>
+        
+        <!--&lt;Icon&gt;-->
+         
+        <h3
+          class="h4"
+        >
+          My Card
+        </h3>
+      </div>
+       
+      <div
+        aria-checked="true"
+        aria-disabled="false"
+        class="dusk-switch dusk-switch--on-surface"
+        role="switch"
+        tabindex="0"
+      />
+      <!--&lt;Switch&gt;-->
+    </header>
+     
+    
+     
+  </div>
+  
+  <!--&lt;Card&gt;-->
+  <!--&lt;IconHeaderToggleCard&gt;-->
+</div>
+`;
diff --git a/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeadingCard.spec.js.snap b/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeadingCard.spec.js.snap
new file mode 100644
index 0000000000..ed434192ea
--- /dev/null
+++ b/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeadingCard.spec.js.snap
@@ -0,0 +1,59 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`IconHeadingCard > renders the IconHeadingCard component with a heading 1`] = `
+<div
+  class="dusk-card dusk-card--gap-default"
+>
+  <header
+    class="card__header"
+    slot="header"
+  >
+    <div
+      class="card__header-title"
+    >
+       
+      <h3
+        class="h4"
+      >
+        My Card
+      </h3>
+    </div>
+  </header>
+   
+   
+</div>
+`;
+
+exports[`IconHeadingCard > renders the IconHeadingCard component with a heading and an icon 1`] = `
+<div
+  class="dusk-card dusk-card--gap-default"
+>
+  <header
+    class="card__header"
+    slot="header"
+  >
+    <div
+      class="card__header-title"
+    >
+      <svg
+        class="dusk-icon dusk-icon--size--normal"
+        role="graphics-symbol"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M3,3H21V21H3V3M5,5V19H19V5H5Z"
+        />
+      </svg>
+      
+       
+      <h3
+        class="h4"
+      >
+        My Card
+      </h3>
+    </div>
+  </header>
+   
+   
+</div>
+`;
diff --git a/web-wallet/src/lib/containers/__tests__/__snapshots__/ToggleableCard.spec.js.snap b/web-wallet/src/lib/containers/__tests__/__snapshots__/ToggleableCard.spec.js.snap
new file mode 100644
index 0000000000..d8925a79a0
--- /dev/null
+++ b/web-wallet/src/lib/containers/__tests__/__snapshots__/ToggleableCard.spec.js.snap
@@ -0,0 +1,120 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`IconHeadingCard > renders the ToggleableCard component with a heading 1`] = `
+<div
+  class="dusk-card dusk-card--gap-default"
+>
+  <header
+    class="card__header"
+    slot="header"
+  >
+    <div
+      class="card__header-title"
+    >
+       
+      <h3
+        class="h4"
+      >
+        My Card
+      </h3>
+    </div>
+     
+    <div
+      aria-checked="false"
+      aria-disabled="false"
+      class="dusk-switch dusk-switch--on-surface"
+      role="switch"
+      tabindex="0"
+    />
+  </header>
+   
+  
+   
+</div>
+`;
+
+exports[`IconHeadingCard > renders the ToggleableCard component with a heading and an icon 1`] = `
+<div
+  class="dusk-card dusk-card--gap-default"
+>
+  <header
+    class="card__header"
+    slot="header"
+  >
+    <div
+      class="card__header-title"
+    >
+      <svg
+        class="dusk-icon dusk-icon--size--normal"
+        role="graphics-symbol"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M3,3H21V21H3V3M5,5V19H19V5H5Z"
+        />
+      </svg>
+      
+       
+      <h3
+        class="h4"
+      >
+        My Card
+      </h3>
+    </div>
+     
+    <div
+      aria-checked="false"
+      aria-disabled="false"
+      class="dusk-switch dusk-switch--on-surface"
+      role="switch"
+      tabindex="0"
+    />
+  </header>
+   
+  
+   
+</div>
+`;
+
+exports[`IconHeadingCard > renders the ToggleableCard component with a toggle 1`] = `
+<div
+  class="dusk-card dusk-card--gap-default"
+>
+  <header
+    class="card__header"
+    slot="header"
+  >
+    <div
+      class="card__header-title"
+    >
+      <svg
+        class="dusk-icon dusk-icon--size--normal"
+        role="graphics-symbol"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M3,3H21V21H3V3M5,5V19H19V5H5Z"
+        />
+      </svg>
+      
+       
+      <h3
+        class="h4"
+      >
+        My Card
+      </h3>
+    </div>
+     
+    <div
+      aria-checked="true"
+      aria-disabled="false"
+      class="dusk-switch dusk-switch--on-surface"
+      role="switch"
+      tabindex="0"
+    />
+  </header>
+   
+  
+   
+</div>
+`;
diff --git a/web-wallet/src/lib/dusk/components/Card/Card.svelte b/web-wallet/src/lib/dusk/components/Card/Card.svelte
index db8dec0c20..c774ef677a 100644
--- a/web-wallet/src/lib/dusk/components/Card/Card.svelte
+++ b/web-wallet/src/lib/dusk/components/Card/Card.svelte
@@ -1,26 +1,19 @@
 <script>
-  import Icon from "../Icon/Icon.svelte";
-  import Switch from "../Switch/Switch.svelte";
   import { makeClassName } from "$lib/dusk/string";
 
   /** @type {string} */
   export let tag = "div";
 
-  /** @type {string | Undefined} */
-  export let className = undefined;
+  /** @type {CardGap} */
+  export let gap = "default";
 
   /** @type {string | Undefined} */
-  export let iconPath = undefined;
-
-  /** @type {string} */
-  export let heading;
-
-  export let hasToggle = false;
-  export let isToggled = false;
+  export let className = undefined;
 
+  /** @type {boolean} */
   export let onSurface = false;
 
-  $: classes = makeClassName(["dusk-card", className]);
+  $: classes = makeClassName(["dusk-card", `dusk-card--gap-${gap}`, className]);
 </script>
 
 <svelte:element
@@ -29,19 +22,11 @@
   class={classes}
   class:dusk-card--on-surface={onSurface}
 >
-  <header
-    class="dusk-card__header"
-    class:dusk-card__header--toggle-off={hasToggle && !isToggled}
-  >
-    {#if iconPath}
-      <Icon className="dusk-card__icon" path={iconPath} />
-    {/if}
-    <h3 class="h4">{heading}</h3>
-    {#if hasToggle}
-      <Switch onSurface bind:value={isToggled} />
-    {/if}
-  </header>
-  {#if !hasToggle || isToggled}
-    <slot />
+  {#if $$slots.header}
+    <slot name="header" />
+  {/if}
+  <slot />
+  {#if $$slots.footer}
+    <slot name="footer" />
   {/if}
 </svelte:element>
diff --git a/web-wallet/src/lib/dusk/components/__tests__/Card.spec.js b/web-wallet/src/lib/dusk/components/__tests__/Card.spec.js
index 636791f8be..dbe2f3617f 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/Card.spec.js
+++ b/web-wallet/src/lib/dusk/components/__tests__/Card.spec.js
@@ -5,16 +5,8 @@ import { Card } from "..";
 describe("Card", () => {
   afterEach(cleanup);
 
-  it("renders the Card component with a heading", () => {
-    const { container } = render(Card, { props: { heading: "My Card" } });
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it("renders the Card component with an icon when iconPath is provided", () => {
-    const { container } = render(Card, {
-      props: { heading: "My Card", iconPath: "M3,3H21V21H3V3M5,5V19H19V5H5Z" },
-    });
+  it("renders the Card component", () => {
+    const { container } = render(Card);
 
     expect(container.firstChild).toMatchSnapshot();
   });
diff --git a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Card.spec.js.snap b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Card.spec.js.snap
index a873c8bc78..92fedbf7fd 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Card.spec.js.snap
+++ b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Card.spec.js.snap
@@ -1,5 +1,14 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Card > renders the Card component 1`] = `
+<div
+  class="dusk-card dusk-card--gap-default"
+>
+   
+   
+</div>
+`;
+
 exports[`Card > renders the Card component with a heading 1`] = `
 <div
   class="dusk-card"
diff --git a/web-wallet/src/lib/dusk/components/dusk.components.d.ts b/web-wallet/src/lib/dusk/components/dusk.components.d.ts
index ded2e2d1b9..d0c7654f7a 100644
--- a/web-wallet/src/lib/dusk/components/dusk.components.d.ts
+++ b/web-wallet/src/lib/dusk/components/dusk.components.d.ts
@@ -10,6 +10,8 @@ type BadgeVariant = "neutral" | "success" | "warning" | "error";
 
 type ButtonVariant = "primary" | "secondary" | "tertiary";
 
+type CardGap = "small" | "default" | "medium" | "large";
+
 type WizardButtonProps = {
   isAnchor?: boolean;
   href?: string;
diff --git a/web-wallet/src/routes/(welcome)/forced-logout/+page.svelte b/web-wallet/src/routes/(welcome)/forced-logout/+page.svelte
index a95aaf7cfc..1abce10e33 100644
--- a/web-wallet/src/routes/(welcome)/forced-logout/+page.svelte
+++ b/web-wallet/src/routes/(welcome)/forced-logout/+page.svelte
@@ -1,9 +1,8 @@
 <script>
   import { onMount } from "svelte";
   import { mdiAlertOutline } from "@mdi/js";
-
-  import { Card } from "$lib/dusk/components";
   import { AppAnchorButton } from "$lib/components";
+  import { IconHeadingCard } from "$lib/containers/Cards";
 
   onMount(() => {
     // eslint-disable-next-line no-alert
@@ -17,19 +16,21 @@
 </script>
 
 <section class="forced-logout">
-  <Card
+  <IconHeadingCard
     heading="You have been automatically logged out"
     iconPath={mdiAlertOutline}
   >
-    <p>
-      Another tab or window unlocked a different wallet and replaced the local
-      cache.
-    </p>
-    <p>
-      When you log in again with the mnemonic you used in this session, you will
-      need to wait for a full sync.
-    </p>
-  </Card>
+    <div>
+      <p>
+        Another tab or window unlocked a different wallet and replaced the local
+        cache.
+      </p>
+      <p>
+        When you log in again with the mnemonic you used in this session, you
+        will need to wait for a full sync.
+      </p>
+    </div>
+  </IconHeadingCard>
   <AppAnchorButton data-sveltekit-replacestate href="/" text="HOME" />
 </section>
 
diff --git a/web-wallet/src/routes/(welcome)/forced-logout/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/forced-logout/__tests__/__snapshots__/page.spec.js.snap
index 9683c3087c..e848fc08f5 100644
--- a/web-wallet/src/routes/(welcome)/forced-logout/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/forced-logout/__tests__/__snapshots__/page.spec.js.snap
@@ -5,43 +5,50 @@ exports[`Forced logout page > should render the page alert the user about the fo
   class="forced-logout svelte-u7eq0k"
 >
   <div
-    class="dusk-card"
+    class="dusk-card dusk-card--gap-default"
   >
     <header
-      class="dusk-card__header"
+      class="card__header"
+      slot="header"
     >
-      <svg
-        class="dusk-icon dusk-icon--size--normal dusk-card__icon"
-        role="graphics-symbol"
-        viewBox="0 0 24 24"
+      <div
+        class="card__header-title"
       >
-        <path
-          d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
-        />
-      </svg>
-      
-       
-      <h3
-        class="h4"
-      >
-        You have been automatically logged out
-      </h3>
-       
+        <svg
+          class="dusk-icon dusk-icon--size--normal"
+          role="graphics-symbol"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
+          />
+        </svg>
+        
+         
+        <h3
+          class="h4"
+        >
+          You have been automatically logged out
+        </h3>
+      </div>
     </header>
      
-    <p
-      class="svelte-u7eq0k"
-    >
-      Another tab or window unlocked a different wallet and replaced the local
-      cache.
-    </p>
+    <div>
+      <p
+        class="svelte-u7eq0k"
+      >
+        Another tab or window unlocked a different wallet and replaced the local
+        cache.
+      </p>
+       
+      <p
+        class="svelte-u7eq0k"
+      >
+        When you log in again with the mnemonic you used in this session, you
+        will need to wait for a full sync.
+      </p>
+    </div>
      
-    <p
-      class="svelte-u7eq0k"
-    >
-      When you log in again with the mnemonic you used in this session, you will
-      need to wait for a full sync.
-    </p>
   </div>
   
    
diff --git a/web-wallet/src/routes/(welcome)/login/+page.svelte b/web-wallet/src/routes/(welcome)/login/+page.svelte
index 9e316a5efe..a0d3f2f4a4 100644
--- a/web-wallet/src/routes/(welcome)/login/+page.svelte
+++ b/web-wallet/src/routes/(welcome)/login/+page.svelte
@@ -4,8 +4,9 @@
   import { mdiArrowLeft, mdiKeyOutline } from "@mdi/js";
   import { validateMnemonic } from "bip39";
 
-  import { Button, Card, Textbox } from "$lib/dusk/components";
+  import { Button, Textbox } from "$lib/dusk/components";
   import { AppAnchorButton } from "$lib/components";
+  import { IconHeadingCard } from "$lib/containers/Cards";
   import { goto } from "$lib/navigation";
   import {
     mnemonicPhraseResetStore,
@@ -91,7 +92,12 @@
     <mark>Decentralized Finance</mark>
   </h2>
   <div class="login">
-    <Card tag="article" iconPath={mdiKeyOutline} heading={modeLabel}>
+    <IconHeadingCard
+      tag="article"
+      gap="medium"
+      heading={modeLabel}
+      iconPath={mdiKeyOutline}
+    >
       <form
         class="login__form"
         on:submit|preventDefault={handleUnlockWalletSubmit}
@@ -117,7 +123,7 @@
           />
         {/if}
       </form>
-    </Card>
+    </IconHeadingCard>
   </div>
   <footer class="login-footer">
     <AppAnchorButton
diff --git a/web-wallet/src/routes/(welcome)/login/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/login/__tests__/__snapshots__/page.spec.js.snap
index bea763b233..b577ec7f03 100644
--- a/web-wallet/src/routes/(welcome)/login/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/login/__tests__/__snapshots__/page.spec.js.snap
@@ -23,28 +23,32 @@ exports[`Login > Mnemonic phrase workflow > should render the login page and sho
     class="login svelte-1h8yo9z"
   >
     <article
-      class="dusk-card"
+      class="dusk-card dusk-card--gap-medium"
     >
       <header
-        class="dusk-card__header"
+        class="card__header"
+        slot="header"
       >
-        <svg
-          class="dusk-icon dusk-icon--size--normal dusk-card__icon"
-          role="graphics-symbol"
-          viewBox="0 0 24 24"
+        <div
+          class="card__header-title"
         >
-          <path
-            d="M21 18H15V15H13.3C12.2 17.4 9.7 19 7 19C3.1 19 0 15.9 0 12S3.1 5 7 5C9.7 5 12.2 6.6 13.3 9H24V15H21V18M17 16H19V13H22V11H11.9L11.7 10.3C11 8.3 9.1 7 7 7C4.2 7 2 9.2 2 12S4.2 17 7 17C9.1 17 11 15.7 11.7 13.7L11.9 13H17V16M7 15C5.3 15 4 13.7 4 12S5.3 9 7 9 10 10.3 10 12 8.7 15 7 15M7 11C6.4 11 6 11.4 6 12S6.4 13 7 13 8 12.6 8 12 7.6 11 7 11Z"
-          />
-        </svg>
-        
-         
-        <h3
-          class="h4"
-        >
-          Mnemonic phrase
-        </h3>
-         
+          <svg
+            class="dusk-icon dusk-icon--size--normal"
+            role="graphics-symbol"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M21 18H15V15H13.3C12.2 17.4 9.7 19 7 19C3.1 19 0 15.9 0 12S3.1 5 7 5C9.7 5 12.2 6.6 13.3 9H24V15H21V18M17 16H19V13H22V11H11.9L11.7 10.3C11 8.3 9.1 7 7 7C4.2 7 2 9.2 2 12S4.2 17 7 17C9.1 17 11 15.7 11.7 13.7L11.9 13H17V16M7 15C5.3 15 4 13.7 4 12S5.3 9 7 9 10 10.3 10 12 8.7 15 7 15M7 11C6.4 11 6 11.4 6 12S6.4 13 7 13 8 12.6 8 12 7.6 11 7 11Z"
+            />
+          </svg>
+          
+           
+          <h3
+            class="h4"
+          >
+            Mnemonic phrase
+          </h3>
+        </div>
       </header>
        
       <form
@@ -73,6 +77,7 @@ exports[`Login > Mnemonic phrase workflow > should render the login page and sho
         </button>
          
       </form>
+       
     </article>
     
   </div>
@@ -131,28 +136,32 @@ exports[`Login > Password workflow > should show the password field and the link
     class="login svelte-1h8yo9z"
   >
     <article
-      class="dusk-card"
+      class="dusk-card dusk-card--gap-medium"
     >
       <header
-        class="dusk-card__header"
+        class="card__header"
+        slot="header"
       >
-        <svg
-          class="dusk-icon dusk-icon--size--normal dusk-card__icon"
-          role="graphics-symbol"
-          viewBox="0 0 24 24"
+        <div
+          class="card__header-title"
         >
-          <path
-            d="M21 18H15V15H13.3C12.2 17.4 9.7 19 7 19C3.1 19 0 15.9 0 12S3.1 5 7 5C9.7 5 12.2 6.6 13.3 9H24V15H21V18M17 16H19V13H22V11H11.9L11.7 10.3C11 8.3 9.1 7 7 7C4.2 7 2 9.2 2 12S4.2 17 7 17C9.1 17 11 15.7 11.7 13.7L11.9 13H17V16M7 15C5.3 15 4 13.7 4 12S5.3 9 7 9 10 10.3 10 12 8.7 15 7 15M7 11C6.4 11 6 11.4 6 12S6.4 13 7 13 8 12.6 8 12 7.6 11 7 11Z"
-          />
-        </svg>
-        
-         
-        <h3
-          class="h4"
-        >
-          Password
-        </h3>
-         
+          <svg
+            class="dusk-icon dusk-icon--size--normal"
+            role="graphics-symbol"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M21 18H15V15H13.3C12.2 17.4 9.7 19 7 19C3.1 19 0 15.9 0 12S3.1 5 7 5C9.7 5 12.2 6.6 13.3 9H24V15H21V18M17 16H19V13H22V11H11.9L11.7 10.3C11 8.3 9.1 7 7 7C4.2 7 2 9.2 2 12S4.2 17 7 17C9.1 17 11 15.7 11.7 13.7L11.9 13H17V16M7 15C5.3 15 4 13.7 4 12S5.3 9 7 9 10 10.3 10 12 8.7 15 7 15M7 11C6.4 11 6 11.4 6 12S6.4 13 7 13 8 12.6 8 12 7.6 11 7 11Z"
+            />
+          </svg>
+          
+           
+          <h3
+            class="h4"
+          >
+            Password
+          </h3>
+        </div>
       </header>
        
       <form
@@ -193,6 +202,7 @@ exports[`Login > Password workflow > should show the password field and the link
           
         </a>
       </form>
+       
     </article>
     
   </div>
diff --git a/web-wallet/src/routes/(welcome)/setup/AllSet.svelte b/web-wallet/src/routes/(welcome)/setup/AllSet.svelte
index 8551e172ef..fc76e80f29 100644
--- a/web-wallet/src/routes/(welcome)/setup/AllSet.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/AllSet.svelte
@@ -1,7 +1,7 @@
 <script>
   import { settingsStore } from "$lib/stores";
   import { AppImage } from "$lib/components";
-  import { Card } from "$lib/dusk/components";
+  import { IconHeadingCard } from "$lib/containers/Cards";
 
   const { darkMode } = $settingsStore;
 
@@ -10,7 +10,7 @@
     "/images/onboarding/all_set_illustration_light.svg";
 </script>
 
-<Card heading="You are all set!">
+<IconHeadingCard gap="medium" heading="You are all set!">
   <AppImage
     alt="All Set"
     className="all-set__illustration"
@@ -18,12 +18,12 @@
     src={darkMode ? allSetIllustrationLight : allSetIllustration}
     width="205"
   />
-</Card>
+</IconHeadingCard>
 
 <style lang="postcss">
   :global(.all-set__illustration) {
     display: block;
     width: 50%;
-    margin: 1em auto;
+    margin: 0 auto 1em auto;
   }
 </style>
diff --git a/web-wallet/src/routes/(welcome)/setup/PasswordSetup.svelte b/web-wallet/src/routes/(welcome)/setup/PasswordSetup.svelte
index 1c9b3437e2..69b0e364ba 100644
--- a/web-wallet/src/routes/(welcome)/setup/PasswordSetup.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/PasswordSetup.svelte
@@ -1,5 +1,6 @@
 <script>
-  import { Card, Icon, Textbox } from "$lib/dusk/components";
+  import { Icon, Textbox } from "$lib/dusk/components";
+  import { ToggleableCard } from "$lib/containers/Cards";
   import { mdiAlertOutline, mdiKeyOutline } from "@mdi/js";
 
   /** @type {string} */
@@ -26,7 +27,7 @@
   }
 </script>
 
-<Card hasToggle bind:isToggled iconPath={mdiKeyOutline} heading="Password">
+<ToggleableCard heading="Password" iconPath={mdiKeyOutline} bind:isToggled>
   <p>Please store your password safely.</p>
   <Textbox
     className="password-input"
@@ -54,7 +55,7 @@
       >
     {/if}
   </div>
-</Card>
+</ToggleableCard>
 
 <div class="notice">
   <Icon path={mdiAlertOutline} size="large" />
diff --git a/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte b/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte
index 34754dc770..143640cc3f 100644
--- a/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte
@@ -1,13 +1,14 @@
 <script>
-  import { Button, Card } from "$lib/dusk/components";
+  import { Button } from "$lib/dusk/components";
   import { AppAnchor, AppAnchorButton } from "$lib/components";
+  import { IconHeadingCard } from "$lib/containers/Cards";
 
   /** @type {boolean} */
   export let tosAccepted = false;
 </script>
 
 <section>
-  <Card heading="Terms &amp; Privacy Policy">
+  <IconHeadingCard heading="Terms &amp; Privacy Policy">
     <p>
       Our <AppAnchor
         href="https://dusk.network/privacy-policy/"
@@ -31,7 +32,7 @@
         }}
       />
     </div>
-  </Card>
+  </IconHeadingCard>
 </section>
 
 <style lang="postcss">
diff --git a/web-wallet/src/routes/(welcome)/setup/create/MnemonicPhrase.svelte b/web-wallet/src/routes/(welcome)/setup/create/MnemonicPhrase.svelte
index 5be0d785d9..54450c9ba3 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/MnemonicPhrase.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/create/MnemonicPhrase.svelte
@@ -1,5 +1,7 @@
 <script>
-  import { Card, Words } from "$lib/dusk/components";
+  import { Words } from "$lib/dusk/components";
+  import { IconHeadingCard } from "$lib/containers/Cards";
+
   import { mdiAlertOutline } from "@mdi/js";
   import { generateMnemonic } from "bip39";
 
@@ -11,15 +13,15 @@
   }
 </script>
 
-<Card heading="Keep this SAFE" iconPath={mdiAlertOutline}>
-  <p class="mnemonic-notice">
+<IconHeadingCard heading="Keep this SAFE" iconPath={mdiAlertOutline}>
+  <p class="mnemonic-card__notice">
     Please make sure to write your phrase down and save it in a secure location.
   </p>
   <Words words={mnemonicPhrase} />
-</Card>
+</IconHeadingCard>
 
-<style>
-  .mnemonic-notice {
-    margin-bottom: var(--default-gap);
+<style lang="postcss">
+  .mnemonic-card__notice {
+    margin-bottom: var(--small-gap);
   }
 </style>
diff --git a/web-wallet/src/routes/(welcome)/setup/create/MnemonicPreSetup.svelte b/web-wallet/src/routes/(welcome)/setup/create/MnemonicPreSetup.svelte
index 5dbf7b4a72..1f0ee121c8 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/MnemonicPreSetup.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/create/MnemonicPreSetup.svelte
@@ -1,5 +1,6 @@
 <script>
-  import { Agreement, Card, Icon } from "$lib/dusk/components";
+  import { Agreement, Icon } from "$lib/dusk/components";
+  import { IconHeadingCard } from "$lib/containers/Cards";
   import { mdiAlertOutline } from "@mdi/js";
 
   /** @type {boolean} */
@@ -14,7 +15,7 @@
   $: isValid = agreementOneChecked && agreementTwoChecked;
 </script>
 
-<Card heading="Securely store your seed phrase!" className="mnemonic-presetup">
+<IconHeadingCard gap="medium" heading="Securely store your seed phrase!">
   <Agreement
     name="mnemonic_agreement_one"
     bind:checked={agreementOneChecked}
@@ -24,9 +25,9 @@
     name="mnemonic_agreement_two"
     bind:checked={agreementTwoChecked}
     label="I understand that securing my recovery phrase is my own responsibility.
-      Only I have access to my recovery phrase"
+        Only I have access to my recovery phrase"
   />
-</Card>
+</IconHeadingCard>
 
 <div class="notice">
   <Icon path={mdiAlertOutline} size="large" />
@@ -37,7 +38,7 @@
 </div>
 
 <style lang="postcss">
-  :global(.mnemonic-presetup .dusk-agreement:first-of-type) {
+  :global(.dusk-agreement:first-of-type) {
     margin-bottom: var(--default-gap);
   }
 </style>
diff --git a/web-wallet/src/routes/(welcome)/setup/create/MnemonicValidate.svelte b/web-wallet/src/routes/(welcome)/setup/create/MnemonicValidate.svelte
index 9de34ccbfb..d6738a2a0d 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/MnemonicValidate.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/create/MnemonicValidate.svelte
@@ -1,7 +1,8 @@
 <script>
-  import { Card, Icon, Mnemonic } from "$lib/dusk/components";
+  import { Icon, Mnemonic } from "$lib/dusk/components";
   import { arraysEqual, shuffleArray } from "$lib/dusk/array";
   import { mdiAlertOutline } from "@mdi/js";
+  import { IconHeadingCard } from "$lib/containers/Cards";
 
   /** @type {boolean} */
   export let isValid = false;
@@ -18,7 +19,7 @@
   $: isValid = arraysEqual(enteredMnemonicPhrase, mnemonicPhrase);
 </script>
 
-<Card heading="Verification">
+<IconHeadingCard heading="Verification">
   <p class="mnemonic-notice">Ensure you have backed up the Mnemonic phrase.</p>
   <Mnemonic
     bind:enteredMnemonicPhrase
@@ -31,14 +32,10 @@
       <p>Mnemonic does not match.</p>
     </div>
   {/if}
-</Card>
+</IconHeadingCard>
 
 <style>
   .mnemonic-notice {
-    margin-bottom: var(--default-gap);
-  }
-
-  .notice {
-    margin-top: var(--default-gap);
+    margin-bottom: var(--small-gap);
   }
 </style>
diff --git a/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
index 06cf83ef30..d5cfc3fd0b 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
@@ -68,32 +68,36 @@ exports[`Create > correctly renders the Mnemonic Preview page 1`] = `
   </div>
    
   <div
-    class="dusk-card"
+    class="dusk-card dusk-card--gap-default"
   >
     <header
-      class="dusk-card__header"
+      class="card__header"
+      slot="header"
     >
-      <svg
-        class="dusk-icon dusk-icon--size--normal dusk-card__icon"
-        role="graphics-symbol"
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
-        />
-      </svg>
-      
-       
-      <h3
-        class="h4"
+      <div
+        class="card__header-title"
       >
-        Keep this SAFE
-      </h3>
-       
+        <svg
+          class="dusk-icon dusk-icon--size--normal"
+          role="graphics-symbol"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
+          />
+        </svg>
+        
+         
+        <h3
+          class="h4"
+        >
+          Keep this SAFE
+        </h3>
+      </div>
     </header>
      
     <p
-      class="mnemonic-notice svelte-v9vyl3"
+      class="mnemonic-card__notice svelte-1g52dt5"
     >
       Please make sure to write your phrase down and save it in a secure location.
     </p>
@@ -162,6 +166,7 @@ exports[`Create > correctly renders the Mnemonic Preview page 1`] = `
         sad
       </li>
     </ol>
+     
   </div>
   
    
@@ -297,22 +302,26 @@ exports[`Create > correctly renders the Mnemonic Verification page 1`] = `
   </div>
    
   <div
-    class="dusk-card"
+    class="dusk-card dusk-card--gap-default"
   >
     <header
-      class="dusk-card__header"
+      class="card__header"
+      slot="header"
     >
-       
-      <h3
-        class="h4"
+      <div
+        class="card__header-title"
       >
-        Verification
-      </h3>
-       
+         
+        <h3
+          class="h4"
+        >
+          Verification
+        </h3>
+      </div>
     </header>
      
     <p
-      class="mnemonic-notice svelte-1xuwtw2"
+      class="mnemonic-notice svelte-omhov1"
     >
       Ensure you have backed up the Mnemonic phrase.
     </p>
@@ -566,6 +575,7 @@ exports[`Create > correctly renders the Mnemonic Verification page 1`] = `
     </div>
      
     
+     
   </div>
   
    
@@ -700,22 +710,26 @@ exports[`Create > doesn't let the user proceed if they have entered mismatching
   </div>
    
   <div
-    class="dusk-card"
+    class="dusk-card dusk-card--gap-default"
   >
     <header
-      class="dusk-card__header"
+      class="card__header"
+      slot="header"
     >
-       
-      <h3
-        class="h4"
+      <div
+        class="card__header-title"
       >
-        Verification
-      </h3>
-       
+         
+        <h3
+          class="h4"
+        >
+          Verification
+        </h3>
+      </div>
     </header>
      
     <p
-      class="mnemonic-notice svelte-1xuwtw2"
+      class="mnemonic-notice svelte-omhov1"
     >
       Ensure you have backed up the Mnemonic phrase.
     </p>
@@ -980,7 +994,7 @@ exports[`Create > doesn't let the user proceed if they have entered mismatching
     </div>
      
     <div
-      class="notice notice--error svelte-1xuwtw2"
+      class="notice notice--error"
     >
       <svg
         class="dusk-icon dusk-icon--size--large"
@@ -998,6 +1012,7 @@ exports[`Create > doesn't let the user proceed if they have entered mismatching
       </p>
     </div>
     
+     
   </div>
   
    
@@ -1132,22 +1147,26 @@ exports[`Create > ensures that the Undo button on the Mnemonic Validate step wor
   </div>
    
   <div
-    class="dusk-card"
+    class="dusk-card dusk-card--gap-default"
   >
     <header
-      class="dusk-card__header"
+      class="card__header"
+      slot="header"
     >
-       
-      <h3
-        class="h4"
+      <div
+        class="card__header-title"
       >
-        Verification
-      </h3>
-       
+         
+        <h3
+          class="h4"
+        >
+          Verification
+        </h3>
+      </div>
     </header>
      
     <p
-      class="mnemonic-notice svelte-1xuwtw2"
+      class="mnemonic-notice svelte-omhov1"
     >
       Ensure you have backed up the Mnemonic phrase.
     </p>
@@ -1411,6 +1430,7 @@ exports[`Create > ensures that the Undo button on the Mnemonic Validate step wor
     </div>
      
     
+     
   </div>
   
    
@@ -1551,18 +1571,22 @@ exports[`Create > ensures the All Done step renders as expected 1`] = `
   </div>
    
   <div
-    class="dusk-card"
+    class="dusk-card dusk-card--gap-medium"
   >
     <header
-      class="dusk-card__header"
+      class="card__header"
+      slot="header"
     >
-       
-      <h3
-        class="h4"
+      <div
+        class="card__header-title"
       >
-        You are all set!
-      </h3>
-       
+         
+        <h3
+          class="h4"
+        >
+          You are all set!
+        </h3>
+      </div>
     </header>
      
     <img
@@ -1572,6 +1596,7 @@ exports[`Create > ensures the All Done step renders as expected 1`] = `
       src="/some-base-path/images/onboarding/all_set_illustration.svg"
       width="205"
     />
+     
   </div>
   
    
@@ -1678,27 +1703,32 @@ exports[`Create > ensures the Password step renders as expected 1`] = `
   </div>
    
   <div
-    class="dusk-card"
+    class="dusk-card dusk-card--gap-default"
   >
     <header
-      class="dusk-card__header dusk-card__header--toggle-off"
+      class="card__header"
+      slot="header"
     >
-      <svg
-        class="dusk-icon dusk-icon--size--normal dusk-card__icon"
-        role="graphics-symbol"
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M21 18H15V15H13.3C12.2 17.4 9.7 19 7 19C3.1 19 0 15.9 0 12S3.1 5 7 5C9.7 5 12.2 6.6 13.3 9H24V15H21V18M17 16H19V13H22V11H11.9L11.7 10.3C11 8.3 9.1 7 7 7C4.2 7 2 9.2 2 12S4.2 17 7 17C9.1 17 11 15.7 11.7 13.7L11.9 13H17V16M7 15C5.3 15 4 13.7 4 12S5.3 9 7 9 10 10.3 10 12 8.7 15 7 15M7 11C6.4 11 6 11.4 6 12S6.4 13 7 13 8 12.6 8 12 7.6 11 7 11Z"
-        />
-      </svg>
-      
-       
-      <h3
-        class="h4"
+      <div
+        class="card__header-title"
       >
-        Password
-      </h3>
+        <svg
+          class="dusk-icon dusk-icon--size--normal"
+          role="graphics-symbol"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M21 18H15V15H13.3C12.2 17.4 9.7 19 7 19C3.1 19 0 15.9 0 12S3.1 5 7 5C9.7 5 12.2 6.6 13.3 9H24V15H21V18M17 16H19V13H22V11H11.9L11.7 10.3C11 8.3 9.1 7 7 7C4.2 7 2 9.2 2 12S4.2 17 7 17C9.1 17 11 15.7 11.7 13.7L11.9 13H17V16M7 15C5.3 15 4 13.7 4 12S5.3 9 7 9 10 10.3 10 12 8.7 15 7 15M7 11C6.4 11 6 11.4 6 12S6.4 13 7 13 8 12.6 8 12 7.6 11 7 11Z"
+          />
+        </svg>
+        
+         
+        <h3
+          class="h4"
+        >
+          Password
+        </h3>
+      </div>
        
       <div
         aria-checked="false"
@@ -1709,6 +1739,8 @@ exports[`Create > ensures the Password step renders as expected 1`] = `
       />
     </header>
      
+    
+     
   </div>
   
    
@@ -1864,27 +1896,32 @@ exports[`Create > ensures the Password step renders as expected 2`] = `
   </div>
    
   <div
-    class="dusk-card"
+    class="dusk-card dusk-card--gap-default"
   >
     <header
-      class="dusk-card__header"
+      class="card__header"
+      slot="header"
     >
-      <svg
-        class="dusk-icon dusk-icon--size--normal dusk-card__icon"
-        role="graphics-symbol"
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M21 18H15V15H13.3C12.2 17.4 9.7 19 7 19C3.1 19 0 15.9 0 12S3.1 5 7 5C9.7 5 12.2 6.6 13.3 9H24V15H21V18M17 16H19V13H22V11H11.9L11.7 10.3C11 8.3 9.1 7 7 7C4.2 7 2 9.2 2 12S4.2 17 7 17C9.1 17 11 15.7 11.7 13.7L11.9 13H17V16M7 15C5.3 15 4 13.7 4 12S5.3 9 7 9 10 10.3 10 12 8.7 15 7 15M7 11C6.4 11 6 11.4 6 12S6.4 13 7 13 8 12.6 8 12 7.6 11 7 11Z"
-        />
-      </svg>
-      
-       
-      <h3
-        class="h4"
+      <div
+        class="card__header-title"
       >
-        Password
-      </h3>
+        <svg
+          class="dusk-icon dusk-icon--size--normal"
+          role="graphics-symbol"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M21 18H15V15H13.3C12.2 17.4 9.7 19 7 19C3.1 19 0 15.9 0 12S3.1 5 7 5C9.7 5 12.2 6.6 13.3 9H24V15H21V18M17 16H19V13H22V11H11.9L11.7 10.3C11 8.3 9.1 7 7 7C4.2 7 2 9.2 2 12S4.2 17 7 17C9.1 17 11 15.7 11.7 13.7L11.9 13H17V16M7 15C5.3 15 4 13.7 4 12S5.3 9 7 9 10 10.3 10 12 8.7 15 7 15M7 11C6.4 11 6 11.4 6 12S6.4 13 7 13 8 12.6 8 12 7.6 11 7 11Z"
+          />
+        </svg>
+        
+         
+        <h3
+          class="h4"
+        >
+          Password
+        </h3>
+      </div>
        
       <div
         aria-checked="true"
@@ -1924,6 +1961,8 @@ exports[`Create > ensures the Password step renders as expected 2`] = `
         Password must be at least 8 characters
       </span>
     </div>
+    
+     
   </div>
   
    
@@ -2237,22 +2276,26 @@ exports[`Create > lets the user proceed if they have entered a matching Mnemonic
   </div>
    
   <div
-    class="dusk-card"
+    class="dusk-card dusk-card--gap-default"
   >
     <header
-      class="dusk-card__header"
+      class="card__header"
+      slot="header"
     >
-       
-      <h3
-        class="h4"
+      <div
+        class="card__header-title"
       >
-        Verification
-      </h3>
-       
+         
+        <h3
+          class="h4"
+        >
+          Verification
+        </h3>
+      </div>
     </header>
      
     <p
-      class="mnemonic-notice svelte-1xuwtw2"
+      class="mnemonic-notice svelte-omhov1"
     >
       Ensure you have backed up the Mnemonic phrase.
     </p>
@@ -2517,6 +2560,7 @@ exports[`Create > lets the user proceed if they have entered a matching Mnemonic
     </div>
      
     
+     
   </div>
   
    
@@ -2646,18 +2690,22 @@ exports[`Create > should render the \`Securely store your seed phrase!\` agreeme
   </div>
    
   <div
-    class="dusk-card mnemonic-presetup"
+    class="dusk-card dusk-card--gap-medium"
   >
     <header
-      class="dusk-card__header"
+      class="card__header"
+      slot="header"
     >
-       
-      <h3
-        class="h4"
+      <div
+        class="card__header-title"
       >
-        Securely store your seed phrase!
-      </h3>
-       
+         
+        <h3
+          class="h4"
+        >
+          Securely store your seed phrase!
+        </h3>
+      </div>
     </header>
      
     <div
@@ -2695,9 +2743,10 @@ exports[`Create > should render the \`Securely store your seed phrase!\` agreeme
         for="dusk-checkbox-16"
       >
         I understand that securing my recovery phrase is my own responsibility.
-      Only I have access to my recovery phrase
+        Only I have access to my recovery phrase
       </label>
     </div>
+     
   </div>
   
    
@@ -2794,28 +2843,32 @@ exports[`Create > should render the Existing Wallet notice step of the Create fl
 >
   <section>
     <div
-      class="dusk-card"
+      class="dusk-card dusk-card--gap-default"
     >
       <header
-        class="dusk-card__header"
+        class="card__header"
+        slot="header"
       >
-        <svg
-          class="dusk-icon dusk-icon--size--normal dusk-card__icon"
-          role="graphics-symbol"
-          viewBox="0 0 24 24"
+        <div
+          class="card__header-title"
         >
-          <path
-            d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
-          />
-        </svg>
-        
-         
-        <h3
-          class="h4"
-        >
-          Existing Wallet Detected
-        </h3>
-         
+          <svg
+            class="dusk-icon dusk-icon--size--normal"
+            role="graphics-symbol"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
+            />
+          </svg>
+          
+           
+          <h3
+            class="h4"
+          >
+            Existing Wallet Detected
+          </h3>
+        </div>
       </header>
        
       <p>
@@ -2852,6 +2905,7 @@ exports[`Create > should render the Existing Wallet notice step of the Create fl
           </span>
         </button>
       </div>
+       
     </div>
     
   </section>
@@ -2864,18 +2918,22 @@ exports[`Create > should render the Terms of Service step of the Create flow if
 >
   <section>
     <div
-      class="dusk-card"
+      class="dusk-card dusk-card--gap-default"
     >
       <header
-        class="dusk-card__header"
+        class="card__header"
+        slot="header"
       >
-         
-        <h3
-          class="h4"
+        <div
+          class="card__header-title"
         >
-          Terms & Privacy Policy
-        </h3>
-         
+           
+          <h3
+            class="h4"
+          >
+            Terms & Privacy Policy
+          </h3>
+        </div>
       </header>
        
       <p>
@@ -2919,6 +2977,7 @@ exports[`Create > should render the Terms of Service step of the Create flow if
           </span>
         </button>
       </div>
+       
     </div>
     
   </section>
diff --git a/web-wallet/src/routes/(welcome)/setup/restore/MnemonicAuthenticate.svelte b/web-wallet/src/routes/(welcome)/setup/restore/MnemonicAuthenticate.svelte
index ad14c4b4ce..07cff9eca0 100644
--- a/web-wallet/src/routes/(welcome)/setup/restore/MnemonicAuthenticate.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/restore/MnemonicAuthenticate.svelte
@@ -1,9 +1,12 @@
 <script>
-  import { Card, Mnemonic } from "$lib/dusk/components";
-  import { toast } from "$lib/dusk/components/Toast/store";
   import { validateMnemonic, wordlists } from "bip39";
   import { mdiAlertOutline } from "@mdi/js";
 
+  import { Mnemonic } from "$lib/dusk/components";
+  import { IconHeadingCard } from "$lib/containers/Cards";
+
+  import { toast } from "$lib/dusk/components/Toast/store";
+
   /** @type {boolean} */
   export let isValid = false;
 
@@ -25,6 +28,6 @@
   }
 </script>
 
-<Card heading="Enter your Mnemonic Phrase">
+<IconHeadingCard gap="medium" heading="Enter your Mnemonic Phrase">
   <Mnemonic bind:enteredMnemonicPhrase {wordLimit} type="authenticate" />
-</Card>
+</IconHeadingCard>
diff --git a/web-wallet/src/routes/(welcome)/setup/restore/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/setup/restore/__tests__/__snapshots__/page.spec.js.snap
index 45c4fa2446..2cf45c40a4 100644
--- a/web-wallet/src/routes/(welcome)/setup/restore/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/setup/restore/__tests__/__snapshots__/page.spec.js.snap
@@ -6,28 +6,32 @@ exports[`Restore > should render the Existing Wallet notice step of the Restore
 >
   <section>
     <div
-      class="dusk-card"
+      class="dusk-card dusk-card--gap-default"
     >
       <header
-        class="dusk-card__header"
+        class="card__header"
+        slot="header"
       >
-        <svg
-          class="dusk-icon dusk-icon--size--normal dusk-card__icon"
-          role="graphics-symbol"
-          viewBox="0 0 24 24"
+        <div
+          class="card__header-title"
         >
-          <path
-            d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
-          />
-        </svg>
-        
-         
-        <h3
-          class="h4"
-        >
-          Existing Wallet Detected
-        </h3>
-         
+          <svg
+            class="dusk-icon dusk-icon--size--normal"
+            role="graphics-symbol"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
+            />
+          </svg>
+          
+           
+          <h3
+            class="h4"
+          >
+            Existing Wallet Detected
+          </h3>
+        </div>
       </header>
        
       <p>
@@ -64,6 +68,7 @@ exports[`Restore > should render the Existing Wallet notice step of the Restore
           </span>
         </button>
       </div>
+       
     </div>
     
   </section>
@@ -121,18 +126,22 @@ exports[`Restore > should render the Mnemonic Authenticate step after accepting
   </div>
    
   <div
-    class="dusk-card"
+    class="dusk-card dusk-card--gap-medium"
   >
     <header
-      class="dusk-card__header"
+      class="card__header"
+      slot="header"
     >
-       
-      <h3
-        class="h4"
+      <div
+        class="card__header-title"
       >
-        Enter your Mnemonic Phrase
-      </h3>
-       
+         
+        <h3
+          class="h4"
+        >
+          Enter your Mnemonic Phrase
+        </h3>
+      </div>
     </header>
      
     <div
@@ -268,6 +277,7 @@ exports[`Restore > should render the Mnemonic Authenticate step after accepting
         
       </div>
     </div>
+     
   </div>
   
    
@@ -338,18 +348,22 @@ exports[`Restore > should render the Terms of Service step of the Restore flow i
 >
   <section>
     <div
-      class="dusk-card"
+      class="dusk-card dusk-card--gap-default"
     >
       <header
-        class="dusk-card__header"
+        class="card__header"
+        slot="header"
       >
-         
-        <h3
-          class="h4"
+        <div
+          class="card__header-title"
         >
-          Terms & Privacy Policy
-        </h3>
-         
+           
+          <h3
+            class="h4"
+          >
+            Terms & Privacy Policy
+          </h3>
+        </div>
       </header>
        
       <p>
@@ -393,6 +407,7 @@ exports[`Restore > should render the Terms of Service step of the Restore flow i
           </span>
         </button>
       </div>
+       
     </div>
     
   </section>
diff --git a/web-wallet/src/routes/components-showcase/Cards.svelte b/web-wallet/src/routes/components-showcase/Cards.svelte
index 615e078db1..3c6ca8b2fe 100644
--- a/web-wallet/src/routes/components-showcase/Cards.svelte
+++ b/web-wallet/src/routes/components-showcase/Cards.svelte
@@ -1,12 +1,14 @@
 <script>
-  import { Card } from "$lib/dusk/components";
+  import { Card, Icon } from "$lib/dusk/components";
   import { mdiHome } from "@mdi/js";
 </script>
 
 <section>
-  <Card heading="My Card" />
-  <Card iconPath={mdiHome} heading="My Card" />
-  <Card iconPath={mdiHome} heading="My Card">
+  <Card>
+    <header slot="header" class="card__header">
+      <Icon path={mdiHome} />
+      <h3>Card Title</h3>
+    </header>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra
       tincidunt dolor, nec imperdiet felis tristique non. Nunc quis tempus est,
@@ -17,11 +19,20 @@
       ullamcorper in velit. Aenean eros dolor, condimentum sed tempor et, ornare
       in erat.
     </p>
+    <footer slot="footer">
+      <small>This is an example footer.</small>
+    </footer>
   </Card>
 </section>
 
-<style>
+<style lang="postcss">
   p:first-of-type {
     margin-bottom: 1em;
   }
+
+  :global(.card__header) {
+    display: flex;
+    align-items: center;
+    gap: var(--small-gap);
+  }
 </style>
diff --git a/web-wallet/src/style/dusk-components/card.css b/web-wallet/src/style/dusk-components/card.css
index 2242b3fc97..7930c6affb 100644
--- a/web-wallet/src/style/dusk-components/card.css
+++ b/web-wallet/src/style/dusk-components/card.css
@@ -1,34 +1,27 @@
 .dusk-card {
   background-color: var(--surface-color);
   border-radius: var(--control-border-radius-size);
-  padding: 1.3em 2em;
+  padding: 1.3rem 2rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .dusk-card--on-surface {
-  background-color: var(--background-color);
-}
-
-.dusk-card__icon {
-  margin-right: 0.4em;
-  font-size: 1.1em;
+  background-color: var(--on-primary-color);
 }
 
-.dusk-card__header {
-  display: flex;
-  margin-bottom: 1.25em;
-  align-items: center;
+.dusk-card--gap-small {
+  gap: 0.5em;
 }
 
-.dusk-card__header--toggle-off {
-  margin-bottom: 0;
+.dusk-card--gap-default {
+  gap: 0.625em;
 }
 
-.dusk-card .dusk-switch {
-  margin-left: auto;
+.dusk-card--gap-medium {
+  gap: 1.25em;
 }
 
-.dusk-card pre {
-  overflow-x: auto;
-  tab-size: 4;
-  padding: 1em 0;
+.dusk-card--gap-large {
+  gap: 1.875em;
 }