UI Card: fix and document image as header hero image & content cover

packages/ui/CHANGELOG.md

@@ -5,12 +5,17 @@
 ### Bug Fixes
 
 -   `Drawer`: Restore the slide-out animation when the popup closes ([#77800](https://github.com/WordPress/gutenberg/pull/77800)).
+-   `Card`: Fix missing gap between `Card.Header` and `Card.Content` when another element (e.g. an image) precedes the header as the first card child ([#77856](https://github.com/WordPress/gutenberg/pull/77856)).
 
 ### Enhancements
 
 -   `Drawer`: Fade the popup elevation shadow alongside the slide ([#77800](https://github.com/WordPress/gutenberg/pull/77800)).
 -   `Drawer`: Allow mouse-drag swipe-dismiss in the popup-edge padding gutter ([#77800](https://github.com/WordPress/gutenberg/pull/77800)).
 
+### Documentation
+
+-   `Card`: Add Storybook examples showing how to place images directly inside `Card.Root` for hero and cover image layouts, covering four compositions: image with header and content, image with header only, image with content only, and image alone ([#77856](https://github.com/WordPress/gutenberg/pull/77856)).
+
 ## 0.12.0 (2026-04-29)
 
 ### Breaking Changes

packages/ui/src/card/stories/index.story.tsx

@@ -106,6 +106,97 @@ export const HeaderOnly: Story = {
 	},
 };
 
+/**
+ * An image placed directly inside `Card.Root` (before `Card.Header` and
+ * `Card.Content`) naturally touches all four card edges. The card's
+ * `overflow: clip` and `border-radius` clip it to the rounded corners, and
+ * the header and content below retain their normal padding.
+ */
+export const HeroImageWithHeaderAndContent: Story = {
+	args: {
+		children: (
+			<>
+				<div
+					style={ {
+						height: 180,
+						background:
+							'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+					} }
+				/>
+				<Card.Header>
+					<Card.Title>Hero image card</Card.Title>
+				</Card.Header>
+				<Card.Content>
+					<Text>Card body text below the hero image and title.</Text>
+				</Card.Content>
+			</>
+		),
+	},
+};
+
+/**
+ * Hero image followed only by a `Card.Header`. No content section below.
+ */
+export const HeroImageWithHeader: Story = {
+	args: {
+		children: (
+			<>
+				<div
+					style={ {
+						height: 180,
+						background:
+							'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+					} }
+				/>
+				<Card.Header>
+					<Card.Title>Hero image card</Card.Title>
+				</Card.Header>
+			</>
+		),
+	},
+};
+
+/**
+ * Hero image followed only by a `Card.Content` body. No header section.
+ */
+export const HeroImageWithContent: Story = {
+	args: {
+		children: (
+			<>
+				<div
+					style={ {
+						height: 180,
+						background:
+							'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+					} }
+				/>
+				<Card.Content>
+					<Text>Card body text below the hero image.</Text>
+				</Card.Content>
+			</>
+		),
+	},
+};
+
+/**
+ * A single image filling the entire card — no header or content sections.
+ * The image is placed directly inside `Card.Root` and is clipped to the
+ * card's rounded corners by `overflow: clip`.
+ */
+export const CoverImage: Story = {
+	args: {
+		children: (
+			<div
+				style={ {
+					height: 180,
+					background:
+						'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+				} }
+			/>
+		),
+	},
+};
+
 /**
  * Use the `render` prop to change the underlying HTML elements for
  * better semantics. Here, `Card.Root` renders as a `<section>` and

packages/ui/src/card/style.module.css

@@ -22,10 +22,15 @@
 	.header,
 	.content {
 		padding: var(--wp-ui-card-padding);
+	}
 
-		&:not(:first-child):not(:last-child) {
-			padding-block-end: 0;
-		}
+	/* Remove the bottom padding from a Content section that sits between two
+	 * other card children so adjacent padded sections don't double up. Header
+	 * is intentionally excluded: the `.header + .content` gap rule below
+	 * depends on the header's bottom padding being intact.
+	 */
+	.content:not(:first-child):not(:last-child) {
+		padding-block-end: 0;
 	}
 
 	/* Custom vertical gap between header and content */