+
+
+ ),
+ },
+};
+
+function CardMenu() {
+ return (
+
+ );
+}
+
+export const WithSmallFullHeaderAndIcon: StoryObj = {
+ args: {
+ children: (
+ <>
+ }
+ eyebrow="Recommended for you"
+ icon="account-circle"
+ size="sm"
+ subTitle="Get to know your colleagues"
+ title="Question of the day"
+ />
+
+
Card Body
+
+
+
Card Footer
+
+
+ ),
+ },
+};
+
+export const WithHorizontalPrimaryButton: StoryObj = {
+ args: {
+ children: (
+ <>
+ }
+ eyebrow="Recommended for you"
+ size="md"
+ subTitle="Get to know your colleagues"
+ title="Question of the day"
+ />
+
+
Card Body
+
+
+
+ {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
+
+
+
+
+ ),
+ },
+};
+
+export const TopStripe: StoryObj = {
+ args: {
+ topStripe: 'medium',
+ children: (
+ <>
+ }
+ eyebrow="Recommended for you"
+ size="md"
+ subTitle="Get to know your colleagues"
+ title="Question of the day"
+ />
+
+
Card Body
+
+
+
+ {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
+
+
+
+
+ ),
+ },
+};
+
+export const CustomTopStripe: StoryObj = {
+ args: {
+ topStripe: 'high',
+ topStripeClassName: 'bg-utility-favorable-highEmphasis-hover',
+ children: (
+ <>
+ }
+ eyebrow="Recommended for you"
+ size="md"
+ subTitle="Get to know your colleagues"
+ title="Question of the day"
+ />
+
+
Card Body
+
+
+
+ {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
+
+
+
+
+ ),
+ },
+};
+
+export const BackgroundCallout: StoryObj = {
+ args: {
+ background: 'call-out',
+ containerStyle: 'medium',
+ topStripeClassName: 'bg-utility-favorable-highEmphasis-hover',
+ children: (
+ <>
+ }
+ eyebrow="Recommended for you"
+ size="md"
+ subTitle="Get to know your colleagues"
+ title="Question of the day"
+ />
+
+
Card Body
+
+
+
+ {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
+
+
+
+
+ ),
+ },
+};
+
+export const Focusable: StoryObj = {
+ args: {
+ tabIndex: 0,
+ topStripeClassName: 'bg-utility-favorable-highEmphasis-hover',
+ children: (
+ <>
+ }
+ eyebrow="Recommended for you"
+ size="md"
+ subTitle="Get to know your colleagues"
+ title="Question of the day"
+ />
+
+
Card Body
+
+
+
+ {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
+
+
+
+
+ ),
+ },
+};
+
+/**
+ * Implementation Example: Cancelling a card membership
+ */
+export const CancelMembership: StoryObj = {
+ parameters: {
+ badges: ['intro-1.0', 'current-2.0', 'implementationExample'],
+ },
+ args: {
+ children: (
+ <>
+
+
+
+ Lorem ipsum dolor sit amet consectetur. Id pretium consequat
+ consequat aliquam arcu
+
+
+
+
+ {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
+
+
+
+
+ ),
+ },
+};
diff --git a/src/components/Card/Card-v2.test.ts b/src/components/Card/Card-v2.test.ts
new file mode 100644
index 000000000..5ff7a1619
--- /dev/null
+++ b/src/components/Card/Card-v2.test.ts
@@ -0,0 +1,8 @@
+import { generateSnapshots } from '@chanzuckerberg/story-utils';
+import type { StoryFile } from '@storybook/testing-react';
+
+import * as stories from './Card-v2.stories';
+
+describe(' (v2)', () => {
+ generateSnapshots(stories as StoryFile);
+});
diff --git a/src/components/Card/Card-v2.tsx b/src/components/Card/Card-v2.tsx
new file mode 100644
index 000000000..d49c7b67f
--- /dev/null
+++ b/src/components/Card/Card-v2.tsx
@@ -0,0 +1,257 @@
+import clsx from 'clsx';
+import type { HTMLAttributes, ReactNode } from 'react';
+import React from 'react';
+
+import type { Size } from '../../util/variant-types';
+import type { IconName } from '../Icon';
+
+import Icon from '../Icon';
+import Text from '../Text';
+
+import styles from './Card-v2.module.css';
+
+/**
+ * TODO-AH:
+ * - handling of clickable cards (how/when possible)
+ * - handling of cards vs container/sections (discussion)
+ * - handling/disambiguation of containerStyle, background color that aren't allowed
+ */
+
+export interface CardProps extends HTMLAttributes {
+ // Component API
+ /**
+ * Child node(s) that can be nested inside component
+ */
+ children?: ReactNode;
+ /**
+ * CSS class names that can be appended to the component.
+ */
+ className?: string;
+ // Design API
+ /**
+ *
+ * **Default is `"default"`**.
+ */
+ background: 'default' | 'call-out';
+ /**
+ * The bounding box and other container emphasis details
+ *
+ * **Default is `"low"`**.
+ */
+ containerStyle: 'none' | 'low' | 'medium' | 'high';
+ /**
+ * Decorative top bar used to cause a highlight on a given card. Use
+ * utility classes to adjust background color.
+ *
+ * **Default is `"none"`**.
+ */
+ topStripe: 'none' | 'medium' | 'high';
+ /**
+ * Class to adjust top stripe color.
+ */
+ topStripeClassName: string;
+}
+
+export interface CardSubComponentProps {
+ // Component API
+ /**
+ * Child node(s) that can be nested inside component
+ */
+ children: ReactNode;
+ /**
+ * CSS class names that can be appended to the component.
+ */
+ className?: string;
+}
+
+export interface CardHeaderProps {
+ // Component API
+ /**
+ * Child node(s) that can be nested inside component. Used in place of any of the above named slots.
+ */
+ children?: ReactNode;
+ /**
+ * CSS class names that can be appended to the component.
+ */
+ className?: string;
+ // Design API
+ /**
+ * Component slot to add in an action-focused area to a card. Typically a button with hidden options.
+ */
+ action?: ReactNode;
+ /**
+ * Text above the main title of the card, to add category text/information.
+ */
+ eyebrow?: string;
+ /**
+ * Card slot for an icon sitting in front of the card header text
+ */
+ icon?: IconName;
+ /**
+ * Overall size treatment of the Card header
+ */
+ size?: Extract;
+ /**
+ * Text below the main title of the card, to add supplementary information about the title
+ */
+ subTitle?: string;
+ /**
+ * Main title of the card
+ */
+ title?: string;
+}
+
+/**
+ * `import {Card} from "@chanzuckerberg/eds";`
+ *
+ * Card component is the outer wrapper for the block that typically contains a title, image,
+ * text, and/or calls to action.
+ */
+export const Card = ({
+ background = 'default',
+ className,
+ children,
+ containerStyle = 'low',
+ topStripe = 'none',
+ topStripeClassName,
+ ...other
+}: CardProps) => {
+ const componentClassName = clsx(
+ styles['card'],
+ styles[`card--container-style-${containerStyle}`],
+ styles[`card--background-${background}`],
+ className,
+ );
+ return (
+
+ {children}
+ {topStripe && (
+
+ )}
+
+ );
+};
+
+/**
+ * Body of the Card component.
+ */
+const CardBody = ({ children, className, ...other }: CardSubComponentProps) => {
+ const componentClassName = clsx(styles['card__body'], className);
+ return (
+