diff --git a/__docs__/wonder-blocks-cell/detail-cell-variants.stories.tsx b/__docs__/wonder-blocks-cell/detail-cell-variants.stories.tsx
new file mode 100644
index 000000000..a22f4b190
--- /dev/null
+++ b/__docs__/wonder-blocks-cell/detail-cell-variants.stories.tsx
@@ -0,0 +1,122 @@
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+import type {Meta, StoryObj} from "@storybook/react";
+
+import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
+import {DetailCell} from "@khanacademy/wonder-blocks-cell";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
+import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
+import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
+
+/**
+ * The following stories are used to generate the pseudo states for the
+ * DetailCell component. This is only used for visual testing in Chromatic.
+ */
+export default {
+    title: "Packages / Cell / DetailCell / All Variants",
+    parameters: {
+        docs: {
+            autodocs: false,
+        },
+        backgrounds: {
+            default: "offWhite",
+        },
+    },
+} as Meta;
+
+type StoryComponentType = StoryObj<typeof DetailCell>;
+
+const states = [
+    {
+        label: "Default",
+        props: {},
+    },
+    {
+        label: "Disabled",
+        props: {disabled: true},
+    },
+    {
+        label: "Active",
+        props: {active: true},
+    },
+];
+
+const defaultProps = {
+    title: "Title for article item",
+    subtitle1: "Subtitle 1 for article item",
+    subtitle2: "Subtitle 2 for article item",
+    leftAccessory: (
+        <PhosphorIcon icon={IconMappings.playCircle} size="medium" />
+    ),
+    rightAccessory: <PhosphorIcon icon={IconMappings.caretRight} />,
+};
+
+const States = (props: {label: string} & PropsFor<typeof DetailCell>) => {
+    return (
+        <View>
+            <View style={[styles.scenarios]}>
+                {states.map((scenario) => {
+                    return (
+                        <View style={styles.scenario} key={scenario.label}>
+                            <LabelSmall>
+                                {props.label} ({scenario.label})
+                            </LabelSmall>
+                            <DetailCell {...props} {...scenario.props} />
+                        </View>
+                    );
+                })}
+            </View>
+        </View>
+    );
+};
+
+const AllVariants = () => (
+    <View style={{gap: spacing.large_24}}>
+        <States label="Default" {...defaultProps} />
+        <States label="Clickable" {...defaultProps} onClick={() => {}} />
+        <States label="Link" {...defaultProps} href="/" />
+    </View>
+);
+
+export const Default: StoryComponentType = {
+    render: AllVariants,
+};
+
+export const Hover: StoryComponentType = {
+    render: AllVariants,
+    parameters: {pseudo: {hover: true}},
+};
+
+export const Focus: StoryComponentType = {
+    render: AllVariants,
+    parameters: {pseudo: {focusVisible: true}},
+};
+
+export const HoverFocus: StoryComponentType = {
+    name: "Hover + Focus",
+    render: AllVariants,
+    parameters: {pseudo: {hover: true, focusVisible: true}},
+};
+
+export const Active: StoryComponentType = {
+    render: AllVariants,
+    parameters: {pseudo: {active: true}},
+};
+
+const styles = StyleSheet.create({
+    statesContainer: {
+        padding: spacing.medium_16,
+    },
+    scenarios: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.xxxLarge_64,
+        flexWrap: "wrap",
+    },
+    scenario: {
+        gap: spacing.small_12,
+        overflow: "hidden",
+    },
+});
diff --git a/__docs__/wonder-blocks-cell/detail-cell.stories.tsx b/__docs__/wonder-blocks-cell/detail-cell.stories.tsx
index 64012a2f6..a761b2489 100644
--- a/__docs__/wonder-blocks-cell/detail-cell.stories.tsx
+++ b/__docs__/wonder-blocks-cell/detail-cell.stories.tsx
@@ -13,6 +13,7 @@ import packageConfig from "../../packages/wonder-blocks-cell/package.json";
 import ComponentInfo from "../../.storybook/components/component-info";
 import DetailCellArgTypes from "./detail-cell.argtypes";
 import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
+import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
 
 export default {
     title: "Packages / Cell / DetailCell",
@@ -344,6 +345,130 @@ export const DetailCellsAsListItems: StoryComponentType = {
     },
 };
 
+export const Scenarios = () => {
+    const longText =
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ";
+    const longTextWithNoWordBreak =
+        "Loremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua";
+
+    const defaultProps = {
+        title: "Title for article item",
+        subtitle1: "Subtitle 1 for article item",
+        subtitle2: "Subtitle 2 for article item",
+        leftAccessory: (
+            <PhosphorIcon icon={IconMappings.playCircle} size="medium" />
+        ),
+        rightAccessory: <PhosphorIcon icon={IconMappings.caretRight} />,
+    };
+
+    const scenarios = [
+        {
+            label: "Default",
+            props: defaultProps,
+        },
+        {
+            label: "No Icons",
+            props: {
+                ...defaultProps,
+                leftAccessory: undefined,
+                rightAccessory: undefined,
+            },
+        },
+        {
+            label: "Left Icon Only",
+            props: {
+                ...defaultProps,
+                rightAccessory: undefined,
+            },
+        },
+        {
+            label: "Right Icon Only",
+            props: {
+                ...defaultProps,
+                leftAccessory: undefined,
+            },
+        },
+        {
+            label: "No Subtitles",
+            props: {
+                ...defaultProps,
+                subtitle1: undefined,
+                subtitle2: undefined,
+            },
+        },
+        {
+            label: "Subtitle 1 only",
+            props: {
+                ...defaultProps,
+                subtitle2: undefined,
+            },
+        },
+        {
+            label: "Subtitle 2 only",
+            props: {
+                ...defaultProps,
+                subtitle1: undefined,
+            },
+        },
+        {
+            label: "Title only",
+            props: {
+                title: defaultProps.title,
+            },
+        },
+        {
+            label: "Long Text",
+            props: {
+                ...defaultProps,
+                title: longText,
+                subtitle1: longText,
+                subtitle2: longText,
+            },
+        },
+        {
+            label: "Long Text No Word Break",
+            props: {
+                ...defaultProps,
+                title: longTextWithNoWordBreak,
+                subtitle1: longTextWithNoWordBreak,
+                subtitle2: longTextWithNoWordBreak,
+            },
+        },
+        {
+            label: "Long Text (no icons)",
+            props: {
+                ...defaultProps,
+                title: longText,
+                subtitle1: longText,
+                subtitle2: longText,
+                leftAccessory: undefined,
+                rightAccessory: undefined,
+            },
+        },
+        {
+            label: "Long Text No Word Break (no icons)",
+            props: {
+                ...defaultProps,
+                title: longTextWithNoWordBreak,
+                subtitle1: longTextWithNoWordBreak,
+                subtitle2: longTextWithNoWordBreak,
+                leftAccessory: undefined,
+                rightAccessory: undefined,
+            },
+        },
+    ];
+    return (
+        <View style={{gap: spacing.large_24}}>
+            {scenarios.map((scenario) => (
+                <>
+                    <LabelSmall>{scenario.label}</LabelSmall>
+                    <DetailCell {...scenario.props} />
+                </>
+            ))}
+        </View>
+    );
+};
+
 const styles = StyleSheet.create({
     example: {
         backgroundColor: color.offWhite,