From ec4cb76bc824c498635fd8f1416366ced7f6fb15 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 7 May 2026 18:44:08 +0000
Subject: [PATCH 1/2] feat(Card): add size prop for compact and roomy padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduce a 'xs' | 'sm' | 'md' | 'lg' size variant that drives the
padding of the header, body and footer slots — useful for popovers and
densely packed dashboards where the default md spacing is too generous.
md is the default and matches the previous slot defaults.

https://claude.ai/code/session_013gYN6XWQ18LRJdDsatDpf7
---
 .../content/examples/card/CardSizeExample.vue | 17 ++++++++++
 docs/content/docs/2.components/card.md        | 10 ++++++
 .../demo/app/pages/components/card.vue        | 12 ++++++-
 .../nuxt/app/pages/components/card.vue        | 12 ++++++-
 src/runtime/components/Card.vue               |  7 ++++-
 src/theme/card.ts                             | 31 ++++++++++++++++---
 6 files changed, 82 insertions(+), 7 deletions(-)
 create mode 100644 docs/app/components/content/examples/card/CardSizeExample.vue

diff --git a/docs/app/components/content/examples/card/CardSizeExample.vue b/docs/app/components/content/examples/card/CardSizeExample.vue
new file mode 100644
index 000000000..c9833f0ee
--- /dev/null
+++ b/docs/app/components/content/examples/card/CardSizeExample.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const sizes = ['xs', 'sm', 'md', 'lg'] as const
+</script>
+
+<template>
+  <div class="grid grid-cols-2 gap-3 w-full">
+    <B24Card
+      v-for="size in sizes"
+      :key="size"
+      :size="size"
+      :title="`Card size=${size}`"
+      description="A short description for the card."
+    >
+      <Placeholder class="h-16" />
+    </B24Card>
+  </div>
+</template>
diff --git a/docs/content/docs/2.components/card.md b/docs/content/docs/2.components/card.md
index 5aa8fa71e..e5de090ce 100644
--- a/docs/content/docs/2.components/card.md
+++ b/docs/content/docs/2.components/card.md
@@ -95,6 +95,16 @@ slots:
 :placeholder{class="h-32"}
 ::
 
+### Size
+
+Use the `size` prop to control the padding of the header, body and footer.
+
+::component-example
+---
+name: 'card-size-example'
+---
+::
+
 ### Variant
 
 Use the `variant` prop to change the variant of the Card.
diff --git a/playgrounds/demo/app/pages/components/card.vue b/playgrounds/demo/app/pages/components/card.vue
index 47eaa60a0..df3bbcbff 100644
--- a/playgrounds/demo/app/pages/components/card.vue
+++ b/playgrounds/demo/app/pages/components/card.vue
@@ -2,8 +2,10 @@
 import theme from '#build/b24ui/card'
 
 const variants = Object.keys(theme.variants.variant)
+const sizes = Object.keys(theme.variants.size)
 const attrs = reactive({
-  variant: [theme.defaultVariants.variant]
+  variant: [theme.defaultVariants.variant],
+  size: [theme.defaultVariants.size]
 })
 </script>
 
@@ -18,6 +20,14 @@ const attrs = reactive({
         multiple
         size="xs"
       />
+      <B24Select
+        v-model="attrs.size"
+        class="w-32"
+        :items="sizes"
+        placeholder="Size"
+        multiple
+        size="xs"
+      />
     </template>
 
     <Matrix :attrs="attrs">
diff --git a/playgrounds/nuxt/app/pages/components/card.vue b/playgrounds/nuxt/app/pages/components/card.vue
index e9afc8436..d38dce5d4 100644
--- a/playgrounds/nuxt/app/pages/components/card.vue
+++ b/playgrounds/nuxt/app/pages/components/card.vue
@@ -2,8 +2,10 @@
 import theme from '#build/b24ui/card'
 
 const variants = Object.keys(theme.variants.variant)
+const sizes = Object.keys(theme.variants.size)
 const attrs = reactive({
-  variant: [theme.defaultVariants.variant]
+  variant: [theme.defaultVariants.variant],
+  size: [theme.defaultVariants.size]
 })
 </script>
 
@@ -18,6 +20,14 @@ const attrs = reactive({
         multiple
         size="xs"
       />
+      <B24Select
+        v-model="attrs.size"
+        class="w-32"
+        :items="sizes"
+        placeholder="Size"
+        multiple
+        size="xs"
+      />
     </template>
 
     <Matrix :attrs="attrs">
diff --git a/src/runtime/components/Card.vue b/src/runtime/components/Card.vue
index d78c06771..24cdffcc2 100644
--- a/src/runtime/components/Card.vue
+++ b/src/runtime/components/Card.vue
@@ -18,6 +18,10 @@ export interface CardProps {
    * @defaultValue 'outline'
    */
   variant?: Card['variants']['variant']
+  /**
+   * @defaultValue 'md'
+   */
+  size?: Card['variants']['size']
   class?: any
   b24ui?: Card['slots']
 }
@@ -47,7 +51,8 @@ const appConfig = useAppConfig() as Card['AppConfig']
 
 // eslint-disable-next-line vue/no-dupe-keys
 const b24ui = computed(() => tv({ extend: theme, ...(appConfig.b24ui?.card || {}) })({
-  variant: props.variant
+  variant: props.variant,
+  size: props.size
 }))
 </script>
 
diff --git a/src/theme/card.ts b/src/theme/card.ts
index 64cba7f66..26acb92b3 100644
--- a/src/theme/card.ts
+++ b/src/theme/card.ts
@@ -10,7 +10,7 @@ export default {
       'overflow-hidden',
       'rounded-(--ui-border-radius-md)'
     ].join(' '),
-    header: 'p-[24px] sm:px-[22px] sm:py-[15px]',
+    header: '',
     title: [
       'font-[family-name:var(--ui-font-family-primary)]',
       'font-(--ui-font-weight-semi-bold)',
@@ -22,8 +22,8 @@ export default {
       'mt-1  text-pretty',
       'text-(length:--ui-font-size-lg)/[normal] text-pretty'
     ].join(' '),
-    body: 'p-[24px] sm:px-[22px] sm:py-[15px]',
-    footer: 'p-[24px] sm:px-[22px] sm:py-[15px]'
+    body: '',
+    footer: ''
   },
   variants: {
     variant: {
@@ -324,9 +324,32 @@ export default {
         title: 'text-(--ui-color-design-selection-content)',
         description: 'text-(--ui-color-design-selection-content)'
       }
+    },
+    size: {
+      xs: {
+        header: 'p-[12px] sm:px-[10px] sm:py-[8px]',
+        body: 'p-[12px] sm:px-[10px] sm:py-[8px]',
+        footer: 'p-[12px] sm:px-[10px] sm:py-[8px]'
+      },
+      sm: {
+        header: 'p-[16px] sm:px-[14px] sm:py-[10px]',
+        body: 'p-[16px] sm:px-[14px] sm:py-[10px]',
+        footer: 'p-[16px] sm:px-[14px] sm:py-[10px]'
+      },
+      md: {
+        header: 'p-[24px] sm:px-[22px] sm:py-[15px]',
+        body: 'p-[24px] sm:px-[22px] sm:py-[15px]',
+        footer: 'p-[24px] sm:px-[22px] sm:py-[15px]'
+      },
+      lg: {
+        header: 'p-[32px] sm:px-[30px] sm:py-[20px]',
+        body: 'p-[32px] sm:px-[30px] sm:py-[20px]',
+        footer: 'p-[32px] sm:px-[30px] sm:py-[20px]'
+      }
     }
   },
   defaultVariants: {
-    variant: 'outline'
+    variant: 'outline',
+    size: 'md'
   }
 }

From 1124f69507576f5b01c753092232d68c6ca8a231 Mon Sep 17 00:00:00 2001
From: Shevchik Igor <noreply@anthropic.com>
Date: Mon, 24 Aug 2026 04:34:57 +0000
Subject: [PATCH 2/2] test(Card): update snapshots after the size variant moved
 padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The `size` variant lifts the padding out of the `header`/`body`/`footer` slot
bases, so for the default `md` it now lands after the variant classes instead of
before them. Fourteen snapshot lines move; every one differs only in the order of
classes inside `class="…"` — set-equal, and nothing else on the line changes.
Rendering at the default size is unchanged.
---
 .../components/__snapshots__/Card-vue.spec.ts.snap | 14 +++++++-------
 test/components/__snapshots__/Card.spec.ts.snap    | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/test/components/__snapshots__/Card-vue.spec.ts.snap b/test/components/__snapshots__/Card-vue.spec.ts.snap
index 69bd2586b..1c25743bb 100644
--- a/test/components/__snapshots__/Card-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Card-vue.spec.ts.snap
@@ -34,7 +34,7 @@ exports[`Card > renders with default slot correctly 1`] = `
 
 exports[`Card > renders with description correctly 1`] = `
 "<div data-slot="root" class="overflow-hidden rounded-(--ui-border-radius-md) bg-(--ui-color-design-outline-bg) border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight) text-(--ui-color-design-outline-content)">
-  <div data-slot="header" class="p-[24px] sm:px-[22px] sm:py-[15px] border-(--ui-color-design-outline-content-divider) border-b-1">
+  <div data-slot="header" class="border-(--ui-color-design-outline-content-divider) border-b-1 p-[24px] sm:px-[22px] sm:py-[15px]">
     <!--v-if-->
     <div data-slot="description" class="mt-1 text-(length:--ui-font-size-lg)/[normal] text-pretty text-(--ui-color-design-outline-content-secondary)">Description</div>
   </div>
@@ -45,7 +45,7 @@ exports[`Card > renders with description correctly 1`] = `
 
 exports[`Card > renders with description slot correctly 1`] = `
 "<div data-slot="root" class="overflow-hidden rounded-(--ui-border-radius-md) bg-(--ui-color-design-outline-bg) border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight) text-(--ui-color-design-outline-content)">
-  <div data-slot="header" class="p-[24px] sm:px-[22px] sm:py-[15px] border-(--ui-color-design-outline-content-divider) border-b-1">
+  <div data-slot="header" class="border-(--ui-color-design-outline-content-divider) border-b-1 p-[24px] sm:px-[22px] sm:py-[15px]">
     <!--v-if-->
     <div data-slot="description" class="mt-1 text-(length:--ui-font-size-lg)/[normal] text-pretty text-(--ui-color-design-outline-content-secondary)">Description slot</div>
   </div>
@@ -58,13 +58,13 @@ exports[`Card > renders with footer slot correctly 1`] = `
 "<div data-slot="root" class="overflow-hidden rounded-(--ui-border-radius-md) bg-(--ui-color-design-outline-bg) border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight) text-(--ui-color-design-outline-content)">
   <!--v-if-->
   <!--v-if-->
-  <div data-slot="footer" class="p-[24px] sm:px-[22px] sm:py-[15px] border-(--ui-color-design-outline-content-divider) border-t-1">Footer slot</div>
+  <div data-slot="footer" class="border-(--ui-color-design-outline-content-divider) border-t-1 p-[24px] sm:px-[22px] sm:py-[15px]">Footer slot</div>
 </div>"
 `;
 
 exports[`Card > renders with header slot correctly 1`] = `
 "<div data-slot="root" class="overflow-hidden rounded-(--ui-border-radius-md) bg-(--ui-color-design-outline-bg) border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight) text-(--ui-color-design-outline-content)">
-  <div data-slot="header" class="p-[24px] sm:px-[22px] sm:py-[15px] border-(--ui-color-design-outline-content-divider) border-b-1">Header slot</div>
+  <div data-slot="header" class="border-(--ui-color-design-outline-content-divider) border-b-1 p-[24px] sm:px-[22px] sm:py-[15px]">Header slot</div>
   <!--v-if-->
   <!--v-if-->
 </div>"
@@ -72,7 +72,7 @@ exports[`Card > renders with header slot correctly 1`] = `
 
 exports[`Card > renders with title and description correctly 1`] = `
 "<div data-slot="root" class="overflow-hidden rounded-(--ui-border-radius-md) bg-(--ui-color-design-outline-bg) border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight) text-(--ui-color-design-outline-content)">
-  <div data-slot="header" class="p-[24px] sm:px-[22px] sm:py-[15px] border-(--ui-color-design-outline-content-divider) border-b-1">
+  <div data-slot="header" class="border-(--ui-color-design-outline-content-divider) border-b-1 p-[24px] sm:px-[22px] sm:py-[15px]">
     <div data-slot="title" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-semi-bold) mb-0 text-pretty text-(length:--ui-font-size-2xl)/[normal] text-(--ui-color-design-outline-content)">Title</div>
     <div data-slot="description" class="mt-1 text-(length:--ui-font-size-lg)/[normal] text-pretty text-(--ui-color-design-outline-content-secondary)">Description</div>
   </div>
@@ -83,7 +83,7 @@ exports[`Card > renders with title and description correctly 1`] = `
 
 exports[`Card > renders with title correctly 1`] = `
 "<div data-slot="root" class="overflow-hidden rounded-(--ui-border-radius-md) bg-(--ui-color-design-outline-bg) border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight) text-(--ui-color-design-outline-content)">
-  <div data-slot="header" class="p-[24px] sm:px-[22px] sm:py-[15px] border-(--ui-color-design-outline-content-divider) border-b-1">
+  <div data-slot="header" class="border-(--ui-color-design-outline-content-divider) border-b-1 p-[24px] sm:px-[22px] sm:py-[15px]">
     <div data-slot="title" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-semi-bold) mb-0 text-pretty text-(length:--ui-font-size-2xl)/[normal] text-(--ui-color-design-outline-content)">Title</div>
     <!--v-if-->
   </div>
@@ -94,7 +94,7 @@ exports[`Card > renders with title correctly 1`] = `
 
 exports[`Card > renders with title slot correctly 1`] = `
 "<div data-slot="root" class="overflow-hidden rounded-(--ui-border-radius-md) bg-(--ui-color-design-outline-bg) border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight) text-(--ui-color-design-outline-content)">
-  <div data-slot="header" class="p-[24px] sm:px-[22px] sm:py-[15px] border-(--ui-color-design-outline-content-divider) border-b-1">
+  <div data-slot="header" class="border-(--ui-color-design-outline-content-divider) border-b-1 p-[24px] sm:px-[22px] sm:py-[15px]">
     <div data-slot="title" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-semi-bold) mb-0 text-pretty text-(length:--ui-font-size-2xl)/[normal] text-(--ui-color-design-outline-content)">Title slot</div>
     <!--v-if-->
   </div>
diff --git a/test/components/__snapshots__/Card.spec.ts.snap b/test/components/__snapshots__/Card.spec.ts.snap
index 69bd2586b..1c25743bb 100644
--- a/test/components/__snapshots__/Card.spec.ts.snap
+++ b/test/components/__snapshots__/Card.spec.ts.snap
@@ -34,7 +34,7 @@ exports[`Card > renders with default slot correctly 1`] = `
 
 exports[`Card > renders with description correctly 1`] = `
 "<div data-slot="root" class="overflow-hidden rounded-(--ui-border-radius-md) bg-(--ui-color-design-outline-bg) border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight) text-(--ui-color-design-outline-content)">
-  <div data-slot="header" class="p-[24px] sm:px-[22px] sm:py-[15px] border-(--ui-color-design-outline-content-divider) border-b-1">
+  <div data-slot="header" class="border-(--ui-color-design-outline-content-divider) border-b-1 p-[24px] sm:px-[22px] sm:py-[15px]">
     <!--v-if-->
     <div data-slot="description" class="mt-1 text-(length:--ui-font-size-lg)/[normal] text-pretty text-(--ui-color-design-outline-content-secondary)">Description</div>
   </div>
@@ -45,7 +45,7 @@ exports[`Card > renders with description correctly 1`] = `
 
 exports[`Card > renders with description slot correctly 1`] = `
 "<div data-slot="root" class="overflow-hidden rounded-(--ui-border-radius-md) bg-(--ui-color-design-outline-bg) border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight) text-(--ui-color-design-outline-content)">
-  <div data-slot="header" class="p-[24px] sm:px-[22px] sm:py-[15px] border-(--ui-color-design-outline-content-divider) border-b-1">
+  <div data-slot="header" class="border-(--ui-color-design-outline-content-divider) border-b-1 p-[24px] sm:px-[22px] sm:py-[15px]">
     <!--v-if-->
     <div data-slot="description" class="mt-1 text-(length:--ui-font-size-lg)/[normal] text-pretty text-(--ui-color-design-outline-content-secondary)">Description slot</div>
   </div>
@@ -58,13 +58,13 @@ exports[`Card > renders with footer slot correctly 1`] = `
 "<div data-slot="root" class="overflow-hidden rounded-(--ui-border-radius-md) bg-(--ui-color-design-outline-bg) border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight) text-(--ui-color-design-outline-content)">
   <!--v-if-->
   <!--v-if-->
-  <div data-slot="footer" class="p-[24px] sm:px-[22px] sm:py-[15px] border-(--ui-color-design-outline-content-divider) border-t-1">Footer slot</div>
+  <div data-slot="footer" class="border-(--ui-color-design-outline-content-divider) border-t-1 p-[24px] sm:px-[22px] sm:py-[15px]">Footer slot</div>
 </div>"
 `;
 
 exports[`Card > renders with header slot correctly 1`] = `
 "<div data-slot="root" class="overflow-hidden rounded-(--ui-border-radius-md) bg-(--ui-color-design-outline-bg) border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight) text-(--ui-color-design-outline-content)">
-  <div data-slot="header" class="p-[24px] sm:px-[22px] sm:py-[15px] border-(--ui-color-design-outline-content-divider) border-b-1">Header slot</div>
+  <div data-slot="header" class="border-(--ui-color-design-outline-content-divider) border-b-1 p-[24px] sm:px-[22px] sm:py-[15px]">Header slot</div>
   <!--v-if-->
   <!--v-if-->
 </div>"
@@ -72,7 +72,7 @@ exports[`Card > renders with header slot correctly 1`] = `
 
 exports[`Card > renders with title and description correctly 1`] = `
 "<div data-slot="root" class="overflow-hidden rounded-(--ui-border-radius-md) bg-(--ui-color-design-outline-bg) border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight) text-(--ui-color-design-outline-content)">
-  <div data-slot="header" class="p-[24px] sm:px-[22px] sm:py-[15px] border-(--ui-color-design-outline-content-divider) border-b-1">
+  <div data-slot="header" class="border-(--ui-color-design-outline-content-divider) border-b-1 p-[24px] sm:px-[22px] sm:py-[15px]">
     <div data-slot="title" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-semi-bold) mb-0 text-pretty text-(length:--ui-font-size-2xl)/[normal] text-(--ui-color-design-outline-content)">Title</div>
     <div data-slot="description" class="mt-1 text-(length:--ui-font-size-lg)/[normal] text-pretty text-(--ui-color-design-outline-content-secondary)">Description</div>
   </div>
@@ -83,7 +83,7 @@ exports[`Card > renders with title and description correctly 1`] = `
 
 exports[`Card > renders with title correctly 1`] = `
 "<div data-slot="root" class="overflow-hidden rounded-(--ui-border-radius-md) bg-(--ui-color-design-outline-bg) border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight) text-(--ui-color-design-outline-content)">
-  <div data-slot="header" class="p-[24px] sm:px-[22px] sm:py-[15px] border-(--ui-color-design-outline-content-divider) border-b-1">
+  <div data-slot="header" class="border-(--ui-color-design-outline-content-divider) border-b-1 p-[24px] sm:px-[22px] sm:py-[15px]">
     <div data-slot="title" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-semi-bold) mb-0 text-pretty text-(length:--ui-font-size-2xl)/[normal] text-(--ui-color-design-outline-content)">Title</div>
     <!--v-if-->
   </div>
@@ -94,7 +94,7 @@ exports[`Card > renders with title correctly 1`] = `
 
 exports[`Card > renders with title slot correctly 1`] = `
 "<div data-slot="root" class="overflow-hidden rounded-(--ui-border-radius-md) bg-(--ui-color-design-outline-bg) border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight) text-(--ui-color-design-outline-content)">
-  <div data-slot="header" class="p-[24px] sm:px-[22px] sm:py-[15px] border-(--ui-color-design-outline-content-divider) border-b-1">
+  <div data-slot="header" class="border-(--ui-color-design-outline-content-divider) border-b-1 p-[24px] sm:px-[22px] sm:py-[15px]">
     <div data-slot="title" class="font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-semi-bold) mb-0 text-pretty text-(length:--ui-font-size-2xl)/[normal] text-(--ui-color-design-outline-content)">Title slot</div>
     <!--v-if-->
   </div>