diff --git a/src/Card/Card.js b/src/Card/Card.js
index 880141f..1901177 100644
--- a/src/Card/Card.js
+++ b/src/Card/Card.js
@@ -27,12 +27,11 @@ Card.defaultProps = {
shadow: false,
};
-Card.Header = createComponent({
- name: 'CardHeader',
+Card.Footer = createComponent({
+ name: 'CardFooter',
as: Box,
style: css`
- padding: 1rem 1rem 8px;
- font-weight: 700;
+ padding: 16px;
`,
});
@@ -40,15 +39,24 @@ Card.Body = createComponent({
name: 'CardBody',
as: Box,
style: () => css`
- padding: 8px 1rem;
+ padding: 16px;
+
+ & + ${Card.Footer} {
+ padding-top: 0px;
+ }
`,
});
-Card.Footer = createComponent({
- name: 'CardFooter',
+Card.Header = createComponent({
+ name: 'CardHeader',
as: Box,
style: css`
- padding: 8px 1rem 1rem;
+ padding: 16px;
+ font-weight: 700;
+
+ & + ${Card.Body} {
+ padding-top: 0px;
+ }
`,
});
diff --git a/src/Card/Card.stories.js b/src/Card/Card.stories.js
index 11f6538..97d6750 100644
--- a/src/Card/Card.stories.js
+++ b/src/Card/Card.stories.js
@@ -7,14 +7,21 @@ export default {
};
export const Basic = () => (
- <>
-
- Header
-
- A card is a flexible and extensible content container. It includes options for headers and footers, a wide
- variety of content, contextual background colors, and powerful display options.
-
- Footer
-
- >
+
+ Header
+
+ A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety
+ of content, contextual background colors, and powerful display options.
+
+ Footer
+
+);
+
+export const BodyOnly = () => (
+
+
+ A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety
+ of content, contextual background colors, and powerful display options.
+
+
);