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. + + );