Skip to content

Commit d450f1b

Browse files
committed
feat(card): allow adjusting card body padding via CSS var
1 parent 4ba3821 commit d450f1b

File tree

3 files changed

+7
-2
lines changed

3 files changed

+7
-2
lines changed

docs/guide/components/card.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,11 @@ If you pass `text` prop directly on `ACard` then `ACard` will add `text-sm` clas
2525
This way if you want 16px font for your card text instead of 14px you can omit adding `text-sm` to `p` tag;
2626
:::
2727

28-
:::tip
28+
:::tip Adjusting card body padding
29+
You can adjust the padding to applied by `a-card-body` using `--a-card-padding` CSS variable.
30+
:::
31+
32+
:::tip Adjusting card spacer margin
2933
You can customize the applied `margin-bottom` by configuring `--a-card-spacer` CSS variable.
3034
:::
3135

packages/preset-theme-default/src/scss/index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ body {
3737

3838
// 👉 Card
3939
--a-card-spacer: 1em;
40+
--a-card-padding: 1.25em;
4041

4142
// 👉 Spinner
4243
--a-spinner-size: 1.25em;

packages/preset-theme-default/src/shortcuts.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const shortcuts: Exclude<Preset['shortcuts'], undefined | StaticShortcutMap> = [
8383
// 👉 Card
8484
'a-card': 'em:spacing:rounded-lg shadow-lg em:[&_>_.a-loader_.a-spinner]-w-7',
8585
'a-card-typography-wrapper': 'a-card-padding next:pt-0 em:spacing:not-last:pb-4',
86-
'a-card-padding': 'em:spacing:p-5',
86+
'a-card-padding': 'em:spacing:p-$a-card-padding',
8787
'a-card-spacer': 'not-last-children-mb-$a-card-spacer',
8888
'a-card-body': 'a-card-padding',
8989

0 commit comments

Comments
 (0)