Skip to content

feat(Card): add size prop for compact and roomy padding #475

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
IgorShevchik wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

feat(Card): add size prop for compact and roomy padding #475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ec4cb76
feat(Card): add size prop for compact and roomy padding
claude May 7, 2026
1124f69
test(Card): update snapshots after the size variant moved padding
claude Aug 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions docs/app/components/content/examples/card/CardSizeExample.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
10 changes: 10 additions & 0 deletions docs/content/docs/2.components/card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
12 changes: 11 additions & 1 deletion playgrounds/demo/app/pages/components/card.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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">
Expand Down
12 changes: 11 additions & 1 deletion playgrounds/nuxt/app/pages/components/card.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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">
Expand Down
7 changes: 6 additions & 1 deletion src/runtime/components/Card.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ export interface CardProps {
* @defaultValue 'outline'
*/
variant?: Card['variants']['variant']
/**
* @defaultValue 'md'
*/
size?: Card['variants']['size']
class?: any
b24ui?: Card['slots']
}
Expand Down Expand Up @@ -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>

Expand Down
31 changes: 27 additions & 4 deletions src/theme/card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)',
Expand All @@ -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: {
Expand Down Expand Up @@ -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'
}
}
14 changes: 7 additions & 7 deletions test/components/__snapshots__/Card-vue.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -58,21 +58,21 @@ 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>"
`;

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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
14 changes: 7 additions & 7 deletions test/components/__snapshots__/Card.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -58,21 +58,21 @@ 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>"
`;

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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down