@automattic/vip-design-system 2.6.1 → 2.8.0

package/build/system/Card/Card.d.ts

@@ -1,12 +1,22 @@
+/** @jsxImportSource theme-ui */
 /// <reference types="react" />
 /**
  * External dependencies
  */
 import { Argument } from 'classnames';
 import { BoxProps } from 'theme-ui';
+export declare enum CardVariant {
+    'primary' = 0,
+    'secondary' = 1,
+    'notice' = 2,
+    'indent' = 3
+}
 export interface CardProps {
-    variant?: string;
+    variant?: keyof typeof CardVariant;
     sx?: BoxProps['sx'];
     className?: Argument;
+    title?: string;
+    children?: React.ReactNode;
+    renderHeader?: (title?: string) => React.ReactNode;
 }
 export declare const Card: import("react").ForwardRefExoticComponent<CardProps & BoxProps & import("react").RefAttributes<HTMLElement>>;

package/build/system/Card/Card.js

@@ -1,12 +1,13 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Card = void 0;
+exports.CardVariant = exports.Card = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _ = require("..");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["variant", "sx", "className"];
+var _excluded = ["variant", "title", "renderHeader", "sx", "className", "children"];
+/** @jsxImportSource theme-ui */
 /**
  * External dependencies
  */
@@ -16,20 +17,43 @@ var _excluded = ["variant", "sx", "className"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var CardVariant = exports.CardVariant = /*#__PURE__*/function (CardVariant) {
+  CardVariant[CardVariant["primary"] = 0] = "primary";
+  CardVariant[CardVariant["secondary"] = 1] = "secondary";
+  CardVariant[CardVariant["notice"] = 2] = "notice";
+  CardVariant[CardVariant["indent"] = 3] = "indent";
+  return CardVariant;
+}({});
 var Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+    title = _ref.title,
+    renderHeader = _ref.renderHeader,
     _ref$sx = _ref.sx,
     sx = _ref$sx === void 0 ? {} : _ref$sx,
     className = _ref.className,
+    children = _ref.children,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return (0, _jsxRuntime.jsx)(_.Box, _extends({
+  return (0, _jsxRuntime.jsxs)(_.Box, _extends({
     ref: ref,
-    sx: _extends({
-      // pass variant prop to sx
+    sx: {
       variant: "cards." + variant
-    }, sx),
+    },
     className: (0, _classnames["default"])('vip-card-component', className)
-  }, props));
+  }, props, {
+    children: [renderHeader ? renderHeader(title) : '', title && !renderHeader && (0, _jsxRuntime.jsx)(_.Box, {
+      className: (0, _classnames["default"])('vip-card-header-component', className),
+      sx: {
+        variant: "cards." + variant + ".header"
+      },
+      children: title
+    }), (0, _jsxRuntime.jsx)(_.Box, {
+      className: (0, _classnames["default"])('vip-card-body-component', className),
+      sx: _extends({
+        variant: "cards." + variant + ".children"
+      }, sx),
+      children: children
+    })]
+  }));
 });
 Card.displayName = 'Card';

package/build/system/Card/Card.stories.d.ts

@@ -1,3 +1,4 @@
+/** @jsxImportSource theme-ui */
 /// <reference types="react" />
 declare const _default: {
     title: string;
@@ -5,3 +6,8 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: () => import("react").JSX.Element;
+export declare const WithHeader: () => import("react").JSX.Element;
+export declare const WithCustomHeader: () => import("react").JSX.Element;
+export declare const DefaultSecondary: () => import("react").JSX.Element;
+export declare const WithHeaderSecondary: () => import("react").JSX.Element;
+export declare const DefaultIndent: () => import("react").JSX.Element;

package/build/system/Card/Card.stories.js

@@ -1,18 +1,61 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.WithHeaderSecondary = exports.WithHeader = exports.WithCustomHeader = exports.DefaultSecondary = exports.DefaultIndent = exports.Default = void 0;
 var _ = require("..");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
-/**
- * Internal dependencies
- */
+/** @jsxImportSource theme-ui */
 var _default = exports["default"] = {
   title: 'Card',
   component: _.Card
 };
 var Default = exports.Default = function Default() {
   return (0, _jsxRuntime.jsx)(_.Card, {
-    children: " Hello "
+    children: "Hello"
+  });
+};
+var WithHeader = exports.WithHeader = function WithHeader() {
+  return (0, _jsxRuntime.jsx)(_.Card, {
+    title: "Header",
+    children: "This is a card with a header."
+  });
+};
+var WithCustomHeader = exports.WithCustomHeader = function WithCustomHeader() {
+  return (0, _jsxRuntime.jsx)(_.Box, {
+    sx: {
+      maxWidth: 500
+    },
+    children: (0, _jsxRuntime.jsx)(_.Card, {
+      title: "Screenshot of a website",
+      renderHeader: function renderHeader(title) {
+        return (0, _jsxRuntime.jsx)("img", {
+          src: "https://s0.wp.com/mshots/v1/https://google.com/",
+          sx: {
+            width: '100%'
+          },
+          alt: title
+        });
+      },
+      children: "This is a card with a customized header content."
+    })
+  });
+};
+var DefaultSecondary = exports.DefaultSecondary = function DefaultSecondary() {
+  return (0, _jsxRuntime.jsx)(_.Card, {
+    variant: "secondary",
+    children: "Hello"
+  });
+};
+var WithHeaderSecondary = exports.WithHeaderSecondary = function WithHeaderSecondary() {
+  return (0, _jsxRuntime.jsx)(_.Card, {
+    title: "Header",
+    variant: "secondary",
+    children: "This is a card with a header."
+  });
+};
+var DefaultIndent = exports.DefaultIndent = function DefaultIndent() {
+  return (0, _jsxRuntime.jsx)(_.Card, {
+    variant: "indent",
+    children: "Hello"
   });
 };

package/build/system/Card/Card.test.js

@@ -61,4 +61,29 @@ describe('<Card />', function () {
       }
     }, _callee2);
   })));
+  it('renders the Card component with a title', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+    var _render3, container;
+    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_Card.Card, {
+            title: "Card Header",
+            children: "Card text"
+          })), container = _render3.container;
+          expect(_react.screen.getByText('Card Header')).toBeInTheDocument();
+          expect(_react.screen.getByText('Card text')).toBeInTheDocument();
+
+          // Check for accessibility issues
+          _context3.t0 = expect;
+          _context3.next = 6;
+          return (0, _jestAxe.axe)(container);
+        case 6:
+          _context3.t1 = _context3.sent;
+          (0, _context3.t0)(_context3.t1).toHaveNoViolations();
+        case 8:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
 });

package/build/system/Notice/Notice.js

@@ -25,7 +25,7 @@ var NoticeIcon = function NoticeIcon(_ref) {
     color: color,
     flex: '0 0 auto'
   };
-  var size = 20;
+  var size = 24;
   switch (variant) {
     case 'info':
       return (0, _jsxRuntime.jsx)(_md.MdInfo, {
@@ -68,15 +68,17 @@ var Notice = exports.Notice = /*#__PURE__*/_react["default"].forwardRef(function
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'warning' : _ref2$variant,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded);
-  return (0, _jsxRuntime.jsx)(_.Card, _extends({
+  return (0, _jsxRuntime.jsxs)(_.Card, _extends({
+    variant: "notice",
     sx: _extends({
       boxShadow: 'none',
       borderRadius: 2,
       bg: inline ? 'transparent' : "notice.background." + variant,
-      padding: inline ? 0 : 3,
       color: "notice.text." + variant,
+      fontSize: 2,
       p: {
-        color: "notice.text." + variant
+        color: "notice.text." + variant,
+        fontSize: 2
       },
       a: {
         color: "notice.link." + variant + ".default",
@@ -89,54 +91,50 @@ var Notice = exports.Notice = /*#__PURE__*/_react["default"].forwardRef(function
         '&:hover, &:focus': {
           color: "notice.link." + variant + ".hover"
         }
+      },
+      ul: {
+        pl: 5
       }
     }, sx),
     className: (0, _classnames["default"])('vip-notice-component', className),
     ref: forwardRef
   }, props, {
-    children: (0, _jsxRuntime.jsxs)(_.Flex, {
+    children: [(0, _jsxRuntime.jsx)(_.Box, {
       sx: {
-        height: '100%' // required for the dynamic height of the icon box to work
+        minWidth: '24px'
       },
-      children: [(0, _jsxRuntime.jsx)(_.Box, {
+      children: (0, _jsxRuntime.jsxs)(_.Flex, {
         sx: {
-          minWidth: '32px',
-          mr: 3,
-          mt: 0
+          flexDirection: 'column',
+          // the trick here is to have a flex column with the icon at the bottom and an empty div that fills the space
+          minHeight: '24px',
+          maxHeight: '32px',
+          // we're forcing the max height so that the icon is, at max, aligned between the first and the second line of text
+          alignItems: 'flex-end',
+          // we want the icon to be aligned to the bottom
+          height: '100%' // specifying the height will allow the box to match the height of the content.
         },
-        children: (0, _jsxRuntime.jsxs)(_.Flex, {
-          sx: {
-            flexDirection: 'column',
-            // the trick here is to have a flex column with the icon at the bottom and an empty div that fills the space
-            minHeight: '20px',
-            maxHeight: '32px',
-            // we're forcing the max height so that the icon is, at max, aligned between the first and the second line of text
-            alignItems: 'flex-end',
-            // we want the icon to be aligned to the bottom
-            height: '100%' // specifying the height will allow the box to match the height of the content.
-          },
-          children: [(0, _jsxRuntime.jsx)(_.Box, {
-            sx: {
-              flex: '1 100%' // we need this empty div to make the icon align to the bottom
-            }
-          }), (0, _jsxRuntime.jsx)(NoticeIcon, {
-            color: "notice.icon." + variant,
-            variant: variant
-          })]
-        })
-      }), (0, _jsxRuntime.jsxs)(_.Box, {
-        children: [title && (0, _jsxRuntime.jsx)(_.Heading, {
-          as: headingVariant,
+        children: [(0, _jsxRuntime.jsx)(_.Box, {
           sx: {
-            color: "notice.text." + variant,
-            mb: 0,
-            fontSize: 2,
-            fontWeight: 'bold'
-          },
-          children: title
-        }), children]
-      })]
-    })
+            flex: '1 100%' // we need this empty div to make the icon align to the bottom
+          }
+        }), (0, _jsxRuntime.jsx)(NoticeIcon, {
+          color: "notice.icon." + variant,
+          variant: variant
+        })]
+      })
+    }), (0, _jsxRuntime.jsxs)(_.Box, {
+      children: [title && (0, _jsxRuntime.jsx)(_.Heading, {
+        as: headingVariant,
+        sx: {
+          color: "notice.text." + variant,
+          mb: 0,
+          fontSize: 2,
+          fontWeight: 'bold'
+        },
+        children: title
+      }), children]
+    })]
   }));
 });
 Notice.displayName = 'Notice';

package/build/system/Wizard/WizardStep.js

@@ -70,7 +70,6 @@ var WizardStep = exports.WizardStep = /*#__PURE__*/_react["default"].forwardRef(
     sx: {
       boxShadow: active ? 'low' : 'none',
       borderLeft: '2px solid',
-      p: 4,
       backgroundColor: active ? 'background' : 'transparent',
       borderRadius: 0,
       borderBottom: active ? 'none' : '1px solid',

package/build/system/theme/index.d.ts

@@ -33,29 +33,86 @@ declare namespace _default {
     }
     export namespace cards {
         namespace primary {
-            let padding: number;
-            let borderRadius: number;
             let backgroundColor: string;
+            let borderRadius: number;
             let boxShadow: string;
+            namespace header {
+                let backgroundColor_1: string;
+                export { backgroundColor_1 as backgroundColor };
+                export let borderTopLeftRadius: number;
+                export let borderTopRightRadius: number;
+                export let py: number;
+                export let px: number;
+                export let gap: number;
+                export let fontWeight: string;
+                export let display: string;
+                export let minHeight: number;
+            }
+            namespace children {
+                export let padding: number;
+                let gap_1: number;
+                export { gap_1 as gap };
+            }
         }
         namespace secondary {
-            let borderRadius_1: number;
-            export { borderRadius_1 as borderRadius };
-            export let p: number;
-            let boxShadow_1: string;
-            export { boxShadow_1 as boxShadow };
+            export let variant: string;
             export let border: string;
             export let borderColor: string;
+            let boxShadow_1: string;
+            export { boxShadow_1 as boxShadow };
+            export namespace header_1 {
+                let variant_1: string;
+                export { variant_1 as variant };
+            }
+            export { header_1 as header };
+            export namespace children_1 {
+                let variant_2: string;
+                export { variant_2 as variant };
+            }
+            export { children_1 as children };
+        }
+        namespace notice {
+            let boxShadow_2: string;
+            export { boxShadow_2 as boxShadow };
+            let borderRadius_1: number;
+            export { borderRadius_1 as borderRadius };
+            export let fontSize: number;
+            let padding_1: number;
+            export { padding_1 as padding };
+            export namespace children_2 {
+                export let height: string;
+                let display_1: string;
+                export { display_1 as display };
+                export let flexDirection: string;
+                let py_1: number;
+                export { py_1 as py };
+                let px_1: number;
+                export { px_1 as px };
+                let gap_2: number;
+                export { gap_2 as gap };
+            }
+            export { children_2 as children };
         }
         namespace indent {
             let borderRadius_2: number;
             export { borderRadius_2 as borderRadius };
-            let p_1: number;
-            export { p_1 as p };
-            let boxShadow_2: string;
-            export { boxShadow_2 as boxShadow };
-            let backgroundColor_1: string;
-            export { backgroundColor_1 as backgroundColor };
+            let boxShadow_3: string;
+            export { boxShadow_3 as boxShadow };
+            let backgroundColor_2: string;
+            export { backgroundColor_2 as backgroundColor };
+            export namespace header_2 {
+                let display_2: string;
+                export { display_2 as display };
+                let fontWeight_1: string;
+                export { fontWeight_1 as fontWeight };
+                export let p: number;
+            }
+            export { header_2 as header };
+            export namespace children_3 {
+                let p_1: number;
+                export { p_1 as p };
+            }
+            export { children_3 as children };
         }
     }
     export namespace buttons {
@@ -112,7 +169,7 @@ declare namespace _default {
                 borderColor: string;
             };
         };
-        export let display: {
+        let display_3: {
             variant: string;
             color: string;
             bg: string;
@@ -125,6 +182,7 @@ declare namespace _default {
                 borderColor: string;
             };
         };
+        export { display_3 as display };
         export let ghost: {
             variant: string;
             color: string;
@@ -165,8 +223,9 @@ declare namespace _default {
         };
         export { border_1 as border };
         export namespace text {
-            let variant: string;
-            let color: string;
+            let variant_3: string;
+            export { variant_3 as variant };
+            export let color: string;
         }
         export let icon: {
             variant: string;
@@ -1081,41 +1140,42 @@ declare namespace _default {
             export let top: string;
             export let left: string;
             export let maxWidth: string;
-            let backgroundColor_2: string;
-            export { backgroundColor_2 as backgroundColor };
-            let boxShadow_3: string;
-            export { boxShadow_3 as boxShadow };
+            let backgroundColor_3: string;
+            export { backgroundColor_3 as backgroundColor };
+            let boxShadow_4: string;
+            export { boxShadow_4 as boxShadow };
         }
         export namespace sidebar_1 {
             let position_1: string;
             export { position_1 as position };
             let top_1: string;
             export { top_1 as top };
-            export let height: string;
+            let height_1: string;
+            export { height_1 as height };
             let left_1: string;
             export { left_1 as left };
             export let overflow: string;
             export let margin: number;
             let borderRadius_3: number;
             export { borderRadius_3 as borderRadius };
-            let boxShadow_4: string;
-            export { boxShadow_4 as boxShadow };
-            let backgroundColor_3: string;
-            export { backgroundColor_3 as backgroundColor };
+            let boxShadow_5: string;
+            export { boxShadow_5 as boxShadow };
+            let backgroundColor_4: string;
+            export { backgroundColor_4 as backgroundColor };
         }
         export { sidebar_1 as sidebar };
         export namespace cover {
             let position_2: string;
             export { position_2 as position };
-            let backgroundColor_4: string;
-            export { backgroundColor_4 as backgroundColor };
+            let backgroundColor_5: string;
+            export { backgroundColor_5 as backgroundColor };
             export let width: string;
             let left_2: number;
             export { left_2 as left };
             let top_2: number;
             export { top_2 as top };
-            let height_1: string;
-            export { height_1 as height };
+            let height_2: string;
+            export { height_2 as height };
             export let transform: string;
             let borderRadius_4: number;
             export { borderRadius_4 as borderRadius };
@@ -1171,11 +1231,12 @@ declare namespace _default {
         namespace root {
             export let fontFamily: string;
             export let lineHeight: string;
-            export let fontWeight: string;
+            let fontWeight_2: string;
+            export { fontWeight_2 as fontWeight };
             let color_1: string;
             export { color_1 as color };
-            let backgroundColor_5: string;
-            export { backgroundColor_5 as backgroundColor };
+            let backgroundColor_6: string;
+            export { backgroundColor_6 as backgroundColor };
             export let webkitFontSmoothing: string;
             export let mozOsxFontmoothing: string;
             export let a: {
@@ -1187,8 +1248,8 @@ declare namespace _default {
             };
             export namespace svg {
                 export let fill: string;
-                let display_1: string;
-                export { display_1 as display };
+                let display_4: string;
+                export { display_4 as display };
             }
             export namespace pre {
                 let fontFamily_1: string;
@@ -1207,8 +1268,8 @@ declare namespace outline {
     export let outlineStyle: string;
     export let outlineColor: any;
     export let outlineWidth: string;
-    let boxShadow_5: string;
-    export { boxShadow_5 as boxShadow };
+    let boxShadow_6: string;
+    export { boxShadow_6 as boxShadow };
 }
 declare namespace fonts {
     let body_1: string;

package/build/system/theme/index.js

@@ -250,23 +250,63 @@ export default {
 
 	cards: {
 		primary: {
-			padding: 3,
-			borderRadius: 2,
 			backgroundColor: 'layer.2',
+			borderRadius: 2,
 			boxShadow: 'low',
+			header: {
+				backgroundColor: 'layer.1',
+				borderTopLeftRadius: 2,
+				borderTopRightRadius: 2,
+				py: 3,
+				px: 5,
+				gap: 2,
+				fontWeight: 'bold',
+				display: 'flex',
+				minHeight: 46,
+			},
+			children: {
+				padding: 5,
+				gap: 6,
+			},
 		},
 		secondary: {
-			borderRadius: 2,
-			p: 3,
-			boxShadow: 'none',
+			variant: 'cards.primary',
 			border: '1px solid',
 			borderColor: 'borders.2',
+			boxShadow: 'none',
+			header: {
+				variant: 'cards.primary.header',
+			},
+			children: {
+				variant: 'cards.primary.children',
+			},
+		},
+		notice: {
+			boxShadow: 'none',
+			borderRadius: 2,
+			fontSize: 2,
+			padding: 0,
+			children: {
+				height: '100%',
+				display: 'flex',
+				flexDirection: 'row',
+				py: 3,
+				px: 4,
+				gap: 4,
+			},
 		},
 		indent: {
 			borderRadius: 2,
-			p: 3,
 			boxShadow: 'none',
 			backgroundColor: 'backgroundMuted',
+			header: {
+				display: 'flex',
+				fontWeight: 'bold',
+				p: 3,
+			},
+			children: {
+				p: 3,
+			},
 		},
 	},
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.6.1",
+  "version": "2.8.0",
   "main": "build/system/index.js",
   "scripts": {
     "build-storybook": "storybook build",

package/src/system/Card/Card.stories.tsx

@@ -1,11 +1,39 @@
-/**
- * Internal dependencies
- */
-import { Card } from '..';
+/** @jsxImportSource theme-ui */
+
+import { Box, Card } from '..';
 
 export default {
 	title: 'Card',
 	component: Card,
 };
 
-export const Default = () => <Card> Hello </Card>;
+export const Default = () => <Card>Hello</Card>;
+
+export const WithHeader = () => <Card title="Header">This is a card with a header.</Card>;
+
+export const WithCustomHeader = () => (
+	<Box sx={ { maxWidth: 500 } }>
+		<Card
+			title="Screenshot of a website"
+			renderHeader={ title => (
+				<img
+					src={ `https://s0.wp.com/mshots/v1/https://google.com/` }
+					sx={ { width: '100%' } }
+					alt={ title }
+				/>
+			) }
+		>
+			This is a card with a customized header content.
+		</Card>
+	</Box>
+);
+
+export const DefaultSecondary = () => <Card variant="secondary">Hello</Card>;
+
+export const WithHeaderSecondary = () => (
+	<Card title="Header" variant="secondary">
+		This is a card with a header.
+	</Card>
+);
+
+export const DefaultIndent = () => <Card variant="indent">Hello</Card>;

package/src/system/Card/Card.test.tsx

@@ -29,4 +29,15 @@ describe( '<Card />', () => {
 		// Check for accessibility issues
 		expect( await axe( container ) ).toHaveNoViolations();
 	} );
+
+	it( 'renders the Card component with a title', async () => {
+		const { container } = render( <Card title="Card Header">Card text</Card> );
+
+		expect( screen.getByText( 'Card Header' ) ).toBeInTheDocument();
+
+		expect( screen.getByText( 'Card text' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
 } );

package/src/system/Card/Card.tsx

@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
@@ -10,30 +12,62 @@ import { BoxProps } from 'theme-ui';
  */
 import { Box } from '..';
 
+export enum CardVariant {
+	'primary',
+	'secondary',
+	'notice',
+	'indent',
+}
+
 export interface CardProps {
-	variant?: string;
+	variant?: keyof typeof CardVariant;
 	sx?: BoxProps[ 'sx' ];
 	className?: Argument;
+	title?: string;
+	children?: React.ReactNode;
+	renderHeader?: ( title?: string ) => React.ReactNode;
 }
 
 type CardBoxProps = CardProps & BoxProps;
 
 export const Card = forwardRef< HTMLElement, CardBoxProps >(
 	(
-		{ variant = 'primary', sx = {}, className, ...props }: CardBoxProps,
+		{ variant = 'primary', title, renderHeader, sx = {}, className, children, ...props }: CardProps,
 		ref: Ref< HTMLElement >
-	) => (
-		<Box
-			ref={ ref }
-			sx={ {
-				// pass variant prop to sx
-				variant: `cards.${ variant }`,
-				...sx,
-			} }
-			className={ classNames( 'vip-card-component', className ) }
-			{ ...props }
-		/>
-	)
+	) => {
+		return (
+			<Box
+				ref={ ref }
+				sx={ {
+					variant: `cards.${ variant }`,
+				} }
+				className={ classNames( 'vip-card-component', className ) }
+				{ ...props }
+			>
+				{ renderHeader ? renderHeader( title ) : '' }
+				{ title && ! renderHeader && (
+					<Box
+						className={ classNames( 'vip-card-header-component', className ) }
+						sx={ {
+							variant: `cards.${ variant }.header`,
+						} }
+					>
+						{ title }
+					</Box>
+				) }
+
+				<Box
+					className={ classNames( 'vip-card-body-component', className ) }
+					sx={ {
+						variant: `cards.${ variant }.children`,
+						...sx,
+					} }
+				>
+					{ children }
+				</Box>
+			</Box>
+		);
+	}
 );
 
 Card.displayName = 'Card';

package/src/system/Notice/Notice.tsx

@@ -31,7 +31,7 @@ type ColorVariants = 'warning' | 'error' | 'alert' | 'success' | 'info';
 
 const NoticeIcon = ( { color, variant }: NoticeIconProps ) => {
 	const sx = { color, flex: '0 0 auto' };
-	const size = 20;
+	const size = 24;
 
 	switch ( variant ) {
 		case 'info':
@@ -62,14 +62,16 @@ export const Notice = React.forwardRef< HTMLDivElement, NoticeProps >(
 	) => {
 		return (
 			<Card
+				variant="notice"
 				sx={ {
 					boxShadow: 'none',
 					borderRadius: 2,
 					bg: inline ? 'transparent' : `notice.background.${ variant }`,
-					padding: inline ? 0 : 3,
 					color: `notice.text.${ variant }`,
+					fontSize: 2,
 					p: {
 						color: `notice.text.${ variant }`,
+						fontSize: 2,
 					},
 					a: {
 						color: `notice.link.${ variant }.default`,
@@ -83,52 +85,49 @@ export const Notice = React.forwardRef< HTMLDivElement, NoticeProps >(
 							color: `notice.link.${ variant }.hover`,
 						},
 					},
+					ul: {
+						pl: 5,
+					},
 					...sx,
 				} }
 				className={ classNames( 'vip-notice-component', className ) }
 				ref={ forwardRef }
 				{ ...props }
 			>
-				<Flex
-					sx={ {
-						height: '100%', // required for the dynamic height of the icon box to work
-					} }
-				>
-					<Box sx={ { minWidth: '32px', mr: 3, mt: 0 } }>
-						<Flex
+				<Box sx={ { minWidth: '24px' } }>
+					<Flex
+						sx={ {
+							flexDirection: 'column', // the trick here is to have a flex column with the icon at the bottom and an empty div that fills the space
+							minHeight: '24px',
+							maxHeight: '32px', // we're forcing the max height so that the icon is, at max, aligned between the first and the second line of text
+							alignItems: 'flex-end', // we want the icon to be aligned to the bottom
+							height: '100%', // specifying the height will allow the box to match the height of the content.
+						} }
+					>
+						<Box
+							sx={ {
+								flex: '1 100%', // we need this empty div to make the icon align to the bottom
+							} }
+						></Box>
+						<NoticeIcon color={ `notice.icon.${ variant }` } variant={ variant } />
+					</Flex>
+				</Box>
+				<Box>
+					{ title && (
+						<Heading
+							as={ headingVariant }
 							sx={ {
-								flexDirection: 'column', // the trick here is to have a flex column with the icon at the bottom and an empty div that fills the space
-								minHeight: '20px',
-								maxHeight: '32px', // we're forcing the max height so that the icon is, at max, aligned between the first and the second line of text
-								alignItems: 'flex-end', // we want the icon to be aligned to the bottom
-								height: '100%', // specifying the height will allow the box to match the height of the content.
+								color: `notice.text.${ variant }`,
+								mb: 0,
+								fontSize: 2,
+								fontWeight: 'bold',
 							} }
 						>
-							<Box
-								sx={ {
-									flex: '1 100%', // we need this empty div to make the icon align to the bottom
-								} }
-							></Box>
-							<NoticeIcon color={ `notice.icon.${ variant }` } variant={ variant } />
-						</Flex>
-					</Box>
-					<Box>
-						{ title && (
-							<Heading
-								as={ headingVariant }
-								sx={ {
-									color: `notice.text.${ variant }`,
-									mb: 0,
-									fontSize: 2,
-									fontWeight: 'bold',
-								} }
-							>
-								{ title }
-							</Heading>
-						) }
-						{ children }
-					</Box>
-				</Flex>
+							{ title }
+						</Heading>
+					) }
+					{ children }
+				</Box>
 			</Card>
 		);
 	}

package/src/system/Wizard/WizardStep.tsx

@@ -88,7 +88,6 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
 				sx={ {
 					boxShadow: active ? 'low' : 'none',
 					borderLeft: '2px solid',
-					p: 4,
 					backgroundColor: active ? 'background' : 'transparent',
 					borderRadius: 0,
 					borderBottom: active ? 'none' : '1px solid',

package/src/system/theme/index.js

@@ -250,23 +250,63 @@ export default {
 
 	cards: {
 		primary: {
-			padding: 3,
-			borderRadius: 2,
 			backgroundColor: 'layer.2',
+			borderRadius: 2,
 			boxShadow: 'low',
+			header: {
+				backgroundColor: 'layer.1',
+				borderTopLeftRadius: 2,
+				borderTopRightRadius: 2,
+				py: 3,
+				px: 5,
+				gap: 2,
+				fontWeight: 'bold',
+				display: 'flex',
+				minHeight: 46,
+			},
+			children: {
+				padding: 5,
+				gap: 6,
+			},
 		},
 		secondary: {
-			borderRadius: 2,
-			p: 3,
-			boxShadow: 'none',
+			variant: 'cards.primary',
 			border: '1px solid',
 			borderColor: 'borders.2',
+			boxShadow: 'none',
+			header: {
+				variant: 'cards.primary.header',
+			},
+			children: {
+				variant: 'cards.primary.children',
+			},
+		},
+		notice: {
+			boxShadow: 'none',
+			borderRadius: 2,
+			fontSize: 2,
+			padding: 0,
+			children: {
+				height: '100%',
+				display: 'flex',
+				flexDirection: 'row',
+				py: 3,
+				px: 4,
+				gap: 4,
+			},
 		},
 		indent: {
 			borderRadius: 2,
-			p: 3,
 			boxShadow: 'none',
 			backgroundColor: 'backgroundMuted',
+			header: {
+				display: 'flex',
+				fontWeight: 'bold',
+				p: 3,
+			},
+			children: {
+				p: 3,
+			},
 		},
 	},