diff --git a/.changeset/hero-button-group.md b/.changeset/hero-button-group.md
new file mode 100644
index 0000000000..14fdbbf604
--- /dev/null
+++ b/.changeset/hero-button-group.md
@@ -0,0 +1,22 @@
+---
+'@primer/react-brand': patch
+---
+
+Added `Hero.ButtonGroup` for rendering `Button` and `ActionMenu` children. `Hero.ButtonGroup` is now the de facto way to display buttons in the `Hero`.
+
+⚠️ `Hero.PrimaryAction` and `Hero.SecondaryAction` are now deprecated. Please migrate over to `Hero.ButtonGroup` as they will be removed in a future release.
+
+Migrate using the following approach:
+
+```diff
+-<Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+-<Hero.SecondaryAction href="#">Secondary action</Hero.SecondaryAction>
++<Hero.ButtonGroup>
++  <Button as="a" href="#">
++    Primary action
++  </Button>
++  <Button as="a" href="#">
++    Secondary action
++  </Button>
++</Hero.ButtonGroup>
+```
diff --git a/.changeset/hero-media-position-padding.md b/.changeset/hero-media-position-padding.md
new file mode 100644
index 0000000000..82c1124fa3
--- /dev/null
+++ b/.changeset/hero-media-position-padding.md
@@ -0,0 +1,15 @@
+---
+'@primer/react-brand': minor
+'@primer/brand-css': minor
+---
+
+⚠️ Breaking change to `Hero.Image` and `Hero.Video` ⚠️
+
+Previously combined `padding` and `position` semantics have been separated.
+
+The `position` prop will now only control layout and positioning relative to the content. It accepts `block-end`, `inline-start`, or `inline-end`.
+
+```diff
+-<Hero.Image position="block-end-padded" src="image.jpg" alt="" />
++<Hero.Image position="block-end" padding="all" src="image.jpg" alt="" />
+```
diff --git a/.changeset/quiet-otters-dance.md b/.changeset/quiet-otters-dance.md
index 08400cdf21..0ef072e2b1 100644
--- a/.changeset/quiet-otters-dance.md
+++ b/.changeset/quiet-otters-dance.md
@@ -4,10 +4,10 @@
 
 ⚠️ Breaking change: Removed the `imageBackgroundColor` prop from `River.Visual`, `RiverBreakout.Visual`, and `RiverBreakoutTabs.Visual`.
 
-The `gridline` variant now applies the full-bleed visual background layout by default. Remove `imageBackgroundColor="subtle"` from `River.Visual` and `RiverBreakout.Visual` when using the `gridline` variant.
+The `River` `gridline` variant now applies the full-bleed visual background layout by default. Remove `imageBackgroundColor="subtle"` from `River.Visual` when using the `gridline` variant.
 
-Remove `imageBackgroundColor` from `RiverBreakoutTabs.Visual` without replacement. Its default visual treatment is unchanged.
+Remove `imageBackgroundColor` from `RiverBreakout.Visual` and `RiverBreakoutTabs.Visual` without replacement. Their default visual treatments are unchanged.
 
-The background treatment is not applied to the default `River` or `RiverBreakout` variants.
+The background treatment is not applied to the default `River` variant or either `RiverBreakout` variant.
 
 Updated the River `gridline` variant tablet layout with a `618px` max-width and lateral gridlines.
diff --git a/.changeset/river-visual-layout.md b/.changeset/river-visual-layout.md
new file mode 100644
index 0000000000..76a149c548
--- /dev/null
+++ b/.changeset/river-visual-layout.md
@@ -0,0 +1,16 @@
+---
+'@primer/react-brand': minor
+'@primer/brand-css': minor
+'@primer/brand-primitives': minor
+---
+
+Added opt-in `position` and `padding` controls to `River.Visual` media in the `gridline` variant.
+
+🔗 Storybook examples:
+
+- [Center position](https://stunning-chainsaw-j82glqz.pages.github.io/brand/storybook/?path=/story/components-river-features-gridline-variants--grid-line-visual-position-center)
+- [Block-end position](https://stunning-chainsaw-j82glqz.pages.github.io/brand/storybook/?path=/story/components-river-features-gridline-variants--grid-line-visual-position-block-end)
+- [Block-end inline-start position](https://stunning-chainsaw-j82glqz.pages.github.io/brand/storybook/?path=/story/components-river-features-gridline-variants--grid-line-visual-position-block-end-inline-start)
+- [Block-end inline-end position](https://stunning-chainsaw-j82glqz.pages.github.io/brand/storybook/?path=/story/components-river-features-gridline-variants--grid-line-visual-position-block-end-inline-end)
+- [No padding](https://stunning-chainsaw-j82glqz.pages.github.io/brand/storybook/?path=/story/components-river-features-gridline-variants--grid-line-visual-padding-none)
+- [Padding on all sides](https://stunning-chainsaw-j82glqz.pages.github.io/brand/storybook/?path=/story/components-river-features-gridline-variants--grid-line-visual-padding-all)
diff --git a/.changeset/soft-banners-sparkle.md b/.changeset/soft-banners-sparkle.md
index 9fdcebfe45..c940835479 100644
--- a/.changeset/soft-banners-sparkle.md
+++ b/.changeset/soft-banners-sparkle.md
@@ -4,3 +4,4 @@
 
 - Restored rounded corners to `CTABanner` while preserving square edges when grid lines are enabled.
 - Improved `ButtonGroup` to forward custom class names alongside its default styles.
+- Added native `ActionMenu` child support to `ButtonGroup`, including automatic sizes and positional variants, and the `CTABanner.ButtonGroup` wrapper.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 93b98f712b..e5289d3e74 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -48,7 +48,7 @@ jobs:
         run: npm run check
 
       - name: Run unit tests
-        run: npm run test
+        run: npm run test --workspaces --if-present
 
       - name: Run MCP server smoke tests
         run: npm run smoke --workspace=packages/mcp
diff --git a/.gitignore b/.gitignore
index 90b24199f7..9566ade37a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,6 +25,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 debug-storybook.log
+.playwright-mcp/
 
 # local env files
 .env
diff --git a/apps/next-docs/content/components/ButtonGroup/react.mdx b/apps/next-docs/content/components/ButtonGroup/react.mdx
index 9d5c253c8f..4b2f4759dc 100644
--- a/apps/next-docs/content/components/ButtonGroup/react.mdx
+++ b/apps/next-docs/content/components/ButtonGroup/react.mdx
@@ -1,6 +1,6 @@
 ---
 title: Button group
-description: Use the button group component to group related buttons together.
+description: Use the button group component to group related buttons and action menus together.
 keywords: ['buttons', 'control', 'action', 'group', 'paired']
 show-tabs: true
 tab-label: React
@@ -12,14 +12,14 @@ storybook: '/brand/storybook/?path=/story/components-buttongroup--playground'
 import {ButtonGroupSizesProp, ButtonGroupAsProp} from './react'
 
 ```js
-import {ButtonGroup, Button} from '@primer/react-brand'
+import {ActionMenu, Button, ButtonGroup} from '@primer/react-brand'
 ```
 
 ## Examples
 
 ### Default
 
-This is the default variant for the ButtonGroup component. The first button in the group is the primary button and the second button is the secondary button.
+This is the default variant for the ButtonGroup component. The first item in the group uses the primary button variant and the second uses the secondary button variant.
 
 ```jsx live
 <ButtonGroup>
@@ -28,9 +28,30 @@ This is the default variant for the ButtonGroup component. The first button in t
 </ButtonGroup>
 ```
 
+### Action menus
+
+`ButtonGroup` supports up to two `Button` or `ActionMenu` children and applies a default `variant` to each one.
+
+Explicit `variant` overrides to `Button` or `ActionMenu.Button` will override the default values.
+
+`buttonSize` applies to both child types. Because `ActionMenu` supports only `small` and `medium`, it remains `medium` when `buttonSize="large"`. Set `size` on `ActionMenu` to override the inherited size.
+
+```jsx live
+<ButtonGroup>
+  <Button>Primary action</Button>
+  <ActionMenu>
+    <ActionMenu.Button>More actions</ActionMenu.Button>
+    <ActionMenu.Overlay aria-label="More actions">
+      <ActionMenu.Item value="contact-sales">Contact sales</ActionMenu.Item>
+      <ActionMenu.Item value="view-pricing">View pricing</ActionMenu.Item>
+    </ActionMenu.Overlay>
+  </ActionMenu>
+</ButtonGroup>
+```
+
 ### Sizes
 
-The ButtonGroup component can be rendered in different sizes in `medium` and `large` sizes. The default size is `medium`.
+The ButtonGroup component supports `small`, `medium`, and `large` buttons. The default size is `medium`. ActionMenu children support `small` and `medium`.
 
 ```jsx live
 <ButtonGroup buttonSize="large">
diff --git a/apps/next-docs/content/components/ButtonGroup/react.tsx b/apps/next-docs/content/components/ButtonGroup/react.tsx
index 6b3d481fae..47ebed9e48 100644
--- a/apps/next-docs/content/components/ButtonGroup/react.tsx
+++ b/apps/next-docs/content/components/ButtonGroup/react.tsx
@@ -1,5 +1,5 @@
 'use client'
 import {PropTableValues} from '@primer/doctocat-nextjs/components'
 
-export const ButtonGroupSizesProp = () => <PropTableValues values={['medium', 'large']} commaSeparated />
+export const ButtonGroupSizesProp = () => <PropTableValues values={['small', 'medium', 'large']} commaSeparated />
 export const ButtonGroupAsProp = () => <PropTableValues values={['button', 'a']} commaSeparated />
diff --git a/apps/next-docs/content/components/Hero/react.mdx b/apps/next-docs/content/components/Hero/react.mdx
index e5dc329b30..76797dc1bf 100644
--- a/apps/next-docs/content/components/Hero/react.mdx
+++ b/apps/next-docs/content/components/Hero/react.mdx
@@ -18,7 +18,7 @@ import {
 } from './react'
 
 ```js
-import {Hero} from '@primer/react-brand'
+import {ActionMenu, Button, Hero} from '@primer/react-brand'
 ```
 
 ## Examples
@@ -33,8 +33,36 @@ import {Hero} from '@primer/react-brand'
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
     felis nam pulvinar risus elementum.
   </Hero.Description>
-  <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
-  <Hero.SecondaryAction href="#">Secondary action</Hero.SecondaryAction>
+  <Hero.ButtonGroup>
+    <Button as="a" href="#">
+      Primary action
+    </Button>
+    <Button as="a" href="#">
+      Secondary action
+    </Button>
+  </Hero.ButtonGroup>
+</Hero>
+```
+
+### Action menus
+
+`Hero.ButtonGroup` accepts up to two `Button` or `ActionMenu` children and applies the primary variant to the first item and the secondary variant to the second. Set `variant` on `Button` or `ActionMenu.Button` to override it.
+
+```jsx live
+<Hero>
+  <Hero.Heading>This is my super sweet hero heading</Hero.Heading>
+  <Hero.ButtonGroup>
+    <Button as="a" href="#">
+      Primary action
+    </Button>
+    <ActionMenu>
+      <ActionMenu.Button>More actions</ActionMenu.Button>
+      <ActionMenu.Overlay aria-label="More actions">
+        <ActionMenu.Item value="contact-sales">Contact sales</ActionMenu.Item>
+        <ActionMenu.Item value="view-pricing">View pricing</ActionMenu.Item>
+      </ActionMenu.Overlay>
+    </ActionMenu>
+  </Hero.ButtonGroup>
 </Hero>
 ```
 
@@ -47,14 +75,22 @@ import {Hero} from '@primer/react-brand'
   <Hero>
     <Hero.Label>Actions</Hero.Label>
     <Hero.Heading>Automate your workflow from idea to production</Hero.Heading>
-    <Hero.PrimaryAction href="#">Get started with Actions</Hero.PrimaryAction>
+    <Hero.ButtonGroup>
+      <Button as="a" href="#">
+        Get started with Actions
+      </Button>
+    </Hero.ButtonGroup>
     <Hero.Image src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
   </Hero>
   <br />
   <Hero align="center">
     <Hero.Label>Actions</Hero.Label>
     <Hero.Heading size="2">Automate your workflow from idea to production</Hero.Heading>
-    <Hero.PrimaryAction href="#">Get started with Actions</Hero.PrimaryAction>
+    <Hero.ButtonGroup>
+      <Button as="a" href="#">
+        Get started with Actions
+      </Button>
+    </Hero.ButtonGroup>
     <Hero.Image
       position="inline-end"
       src="/images/placeholder.png"
@@ -78,7 +114,11 @@ The `GridLine` variants all feature a trailing border by default. Use `Box` if y
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
     felis nam pulvinar risus elementum.
   </Hero.Description>
-  <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+  <Hero.ButtonGroup>
+    <Button as="a" href="#">
+      Primary action
+    </Button>
+  </Hero.ButtonGroup>
   <Hero.Image src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
 </Hero>
 ```
@@ -96,7 +136,11 @@ The `GridLine` variants all feature a trailing border by default. Use `Box` if y
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
     felis nam pulvinar risus elementum.
   </Hero.Description>
-  <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+  <Hero.ButtonGroup>
+    <Button as="a" href="#">
+      Primary action
+    </Button>
+  </Hero.ButtonGroup>
   <Hero.Image src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
 </Hero>
 ```
@@ -115,7 +159,11 @@ Use [VideoPlayer](/components/VideoPlayer), a native `<video>` element or a YouT
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
     felis nam pulvinar risus elementum.
   </Hero.Description>
-  <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+  <Hero.ButtonGroup>
+    <Button as="a" href="#">
+      Primary action
+    </Button>
+  </Hero.ButtonGroup>
   <Hero.Video>
     <iframe
       src="https://www.youtube.com/embed/fHwtrOcLAnI"
@@ -142,7 +190,11 @@ Use [VideoPlayer](/components/VideoPlayer), a native `<video>` element or a YouT
     <br />
     developer environments
   </Hero.Heading>
-  <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+  <Hero.ButtonGroup>
+    <Button as="a" href="#">
+      Primary action
+    </Button>
+  </Hero.ButtonGroup>
 </Hero>
 ```
 
@@ -186,8 +238,14 @@ Forwards all props from the [Heading component](/typography/Heading), including
 
 Forwards `size` and `weight` props from the [Text component](/typography/Text).
 
+### Hero.ButtonGroup
+
+Groups up to two [Button](/components/Button) or [ActionMenu](/components/ActionMenu) children. Forwards all props from the [ButtonGroup component](/components/ButtonGroup).
+
 ### Hero.PrimaryAction
 
+Deprecated. Use `Hero.ButtonGroup` with a `Button` child instead.
+
 | name        | type          | default | description                         |
 | ----------- | ------------- | ------- | ----------------------------------- |
 | `className` | `string`      |         | Primary link custom class           |
@@ -198,6 +256,8 @@ Forwards all props from the [Button component](/components/Button).
 
 ### Hero.SecondaryAction
 
+Deprecated. Use `Hero.ButtonGroup` with a `Button` child instead.
+
 | name        | type          | default | description                         |
 | ----------- | ------------- | ------- | ----------------------------------- |
 | `className` | `string`      |         | Secondary link custom class         |
@@ -208,21 +268,21 @@ Forwards all props from the [Button component](/components/Button).
 
 ### Hero.Image
 
-| name       | type                      | default       | description                                  |
-| ---------- | ------------------------- | ------------- | -------------------------------------------- |
-| `position` | <HeroImagePositionProp /> | `'block-end'` | Controls positioning of the foreground image |
+| name       | type                           | default       | description                                       |
+| ---------- | ------------------------------ | ------------- | ------------------------------------------------- |
+| `position` | <HeroImagePositionProp />      | `'block-end'` | Controls positioning of the foreground image      |
+| `padding`  | `'default'`, `'none'`, `'all'` | `'default'`   | Controls padding around media in gridline layouts |
 
 Forwards all props from the [Image component](/components/Image), including `src`, `alt`, and `aspectRatio`.
 
-### Hero.Video
-
-| name            | type                      | default       | description                                                                                                     |
-| --------------- | ------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------- |
-| `position`      | <HeroImagePositionProp /> | `'block-end'` | Controls positioning of the child video element                                                                 |
-| `poster`        | `string`                  |               | URL of the poster image to display before video plays. When set, `posterAltText` and `posterTitle` are required |
-| `posterAltText` | `string`                  |               | Alt text for the poster image. Required when `poster` is set                                                    |
-| `posterTitle`   | `string`                  |               | Title text displayed on the poster overlay. Required when `poster` is set                                       |
+`position` and `padding` props currently only apply to `gridline` variants. The `default` Hero variant ignores non-default media padding and logs a warning during development.
 
-```
+### Hero.Video
 
-```
+| name            | type                           | default       | description                                                                                                     |
+| --------------- | ------------------------------ | ------------- | --------------------------------------------------------------------------------------------------------------- |
+| `position`      | <HeroImagePositionProp />      | `'block-end'` | Controls positioning of the child video element                                                                 |
+| `padding`       | `'default'`, `'none'`, `'all'` | `'default'`   | Controls padding around media in gridline layouts                                                               |
+| `poster`        | `string`                       |               | URL of the poster image to display before video plays. When set, `posterAltText` and `posterTitle` are required |
+| `posterAltText` | `string`                       |               | Alt text for the poster image. Required when `poster` is set                                                    |
+| `posterTitle`   | `string`                       |               | Title text displayed on the poster overlay. Required when `poster` is set                                       |
diff --git a/apps/next-docs/content/components/Hero/react.tsx b/apps/next-docs/content/components/Hero/react.tsx
index a6a596a8ae..b872c3c325 100644
--- a/apps/next-docs/content/components/Hero/react.tsx
+++ b/apps/next-docs/content/components/Hero/react.tsx
@@ -5,9 +5,6 @@ import {TextVariants, defaultTextVariant} from '@primer/react-brand'
 export const HeroDescriptionVariantProp = () => <PropTableValues values={[...TextVariants]} addLineBreaks />
 export const HeroDescriptionVariantPropDefault = () => <PropTableValues values={[defaultTextVariant]} />
 export const HeroImagePositionProp = () => (
-  <PropTableValues
-    values={['block-end', 'block-end-padded', 'inline-end', 'inline-end-padded', 'inline-start', 'inline-start-padded']}
-    addLineBreaks
-  />
+  <PropTableValues values={['block-end', 'inline-end', 'inline-start']} addLineBreaks />
 )
 export const HeroVariantProp = () => <PropTableValues values={['default', 'gridline']} addLineBreaks />
diff --git a/apps/next-docs/content/components/River/react.mdx b/apps/next-docs/content/components/River/react.mdx
index 8577182487..5f367bf153 100644
--- a/apps/next-docs/content/components/River/react.mdx
+++ b/apps/next-docs/content/components/River/react.mdx
@@ -11,7 +11,13 @@ storybook: '/brand/storybook/?path=/story/components-river--default'
 ---
 
 import {Label} from '@primer/react'
-import {RiverAlignProp, RiverImageTextRatio, RiverVariantProp} from './react'
+import {
+  RiverAlignProp,
+  RiverImageTextRatio,
+  RiverVariantProp,
+  RiverVisualPositionProp,
+  RiverVisualPaddingProp,
+} from './react'
 
 ```js
 import {River, RiverBreakout} from '@primer/react-brand'
@@ -68,7 +74,7 @@ import {River, RiverBreakout} from '@primer/react-brand'
 
 ### GridLine variant
 
-The `gridline` variant adds lateral padding to the River component and applies a full-bleed visual background by default, making it suitable for use within bordered grid layouts.
+The `gridline` variant adds lateral padding and applies a full-bleed visual background by default. Use `position` to align media and `padding` to control its inset.
 
 ```jsx live
 <Stack style={{width: '100%'}}>
@@ -82,16 +88,43 @@ The `gridline` variant adds lateral padding to the River component and applies a
       <Link href="#">Call to action</Link>
     </River.Content>
   </River>
-  <River variant="gridline">
+  <River variant="gridline" align="end">
     <River.Visual>
       <img src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
     </River.Visual>
     <River.Content>
       <Heading>GridLine variant</Heading>
-      <Text>Keep adjacent gridline Rivers aligned in the same direction.</Text>
+      <Text>The variant works with all alignment options.</Text>
       <Link href="#">Call to action</Link>
     </River.Content>
   </River>
+  <River variant="gridline">
+    <River.Visual position="block-end-inline-end">
+      <img src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
+    </River.Visual>
+    <River.Content>
+      <Heading>Bottom-right visual</Heading>
+      <Text>The media is flush with the bottom and inline-end edges.</Text>
+    </River.Content>
+  </River>
+  <River variant="gridline">
+    <River.Visual position="block-end-inline-start">
+      <img src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
+    </River.Visual>
+    <River.Content>
+      <Heading>Bottom-left visual</Heading>
+      <Text>The media is flush with the bottom and inline-start edges.</Text>
+    </River.Content>
+  </River>
+  <River variant="gridline">
+    <River.Visual padding="none">
+      <img src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
+    </River.Visual>
+    <River.Content>
+      <Heading>Full-bleed visual</Heading>
+      <Text>The media fills the visual region without padding or corner radius.</Text>
+    </River.Content>
+  </River>
 </Stack>
 ```
 
@@ -229,17 +262,23 @@ The `gridline` variant adds lateral padding to the River component and applies a
 | `id`             | `string`                       |                         | Sets a custom id                                                                                            |
 | `ref`            | `React.RefObject`              |                         | Forward a Ref to the underlying DOM node                                                                    |
 
-### River.Visual and RiverBreakout.Visual <Label>Required</Label>
-
-| Name        | Type              | Default | Description                                                                                                                                   |
-| :---------- | :---------------- | :-----: | :-------------------------------------------------------------------------------------------------------------------------------------------- |
-| `fillMedia` | `boolean`         |  true   | Automatically styles images and video to fill and fit the width of the parent. Disable this setting if you have bespoke styling requirements. |
-| `children`  | `ReactElement`    |         | Bring your own component (BYOC) `img` or `ReactElement` (E.g. Next.js `Image` component)                                                      |
-| `hasShadow` | `boolean`         | `false` | Shadow applied to the `children`. Set be `false` when the child node has a transparent background.                                            |
-| `className` | `string`          |         | Sets a custom class on the root element                                                                                                       |
-| `id`        | `string`          |         | Sets a custom id                                                                                                                              |
-| `ref`       | `React.RefObject` |         | Forward a Ref to the underlying DOM node                                                                                                      |
-| `rounded`   | `boolean`         | `true`  | Toggle visually rounded corners. Enabled by default.                                                                                          |
+### River.Visual <Label>Required</Label>
+
+| Name        | Type                        |   Default   | Description                                                                                                                                                                 |
+| :---------- | :-------------------------- | :---------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `fillMedia` | `boolean`                   |    true     | Automatically styles images and video to fill and fit the width of the parent. Disable this setting if you have bespoke styling requirements.                               |
+| `children`  | `ReactElement`              |             | Bring your own component (BYOC) `img` or `ReactElement` (E.g. Next.js `Image` component)                                                                                    |
+| `position`  | <RiverVisualPositionProp /> | `'default'` | Positions media within the gridline visual region. Explicit positions remain fixed across viewports; `default` preserves responsive behavior.                               |
+| `padding`   | <RiverVisualPaddingProp />  | `'default'` | Controls media inset within the gridline visual region. `none` fills the visual region and removes corner radius regardless of `rounded`; `all` adds padding on every side. |
+| `hasShadow` | `boolean`                   |   `false`   | Shadow applied to the `children`. Set be `false` when the child node has a transparent background.                                                                          |
+| `className` | `string`                    |             | Sets a custom class on the root element                                                                                                                                     |
+| `id`        | `string`                    |             | Sets a custom id                                                                                                                                                            |
+| `ref`       | `React.RefObject`           |             | Forward a Ref to the underlying DOM node                                                                                                                                    |
+| `rounded`   | `boolean`                   |   `true`    | Toggle visually rounded corners. Enabled by default.                                                                                                                        |
+
+### RiverBreakout.Visual <Label>Required</Label>
+
+`RiverBreakout.Visual` supports the `children`, `fillMedia`, `hasShadow`, `rounded`, and standard HTML props listed above. The `position` and `padding` props are specific to `River.Visual`.
 
 ### River.Content and RiverBreakout.Content <Label>Required</Label>
 
diff --git a/apps/next-docs/content/components/River/react.tsx b/apps/next-docs/content/components/River/react.tsx
index 12a2bedc53..953fad11ea 100644
--- a/apps/next-docs/content/components/River/react.tsx
+++ b/apps/next-docs/content/components/River/react.tsx
@@ -1,11 +1,16 @@
 'use client'
 
+import {PropTableValues} from '@primer/doctocat-nextjs/components'
 import {
   defaultRiverImageTextRatio,
   defaultRiverAlign,
   defaultRiverVariant,
+  RiverVisualPositionOptions,
+  RiverVisualPaddingOptions,
 } from '../../../../../packages/react/src/river/River'
 
 export const RiverAlignProp = () => defaultRiverAlign
 export const RiverImageTextRatio = () => defaultRiverImageTextRatio
 export const RiverVariantProp = () => defaultRiverVariant
+export const RiverVisualPositionProp = () => <PropTableValues values={[...RiverVisualPositionOptions]} addLineBreaks />
+export const RiverVisualPaddingProp = () => <PropTableValues values={[...RiverVisualPaddingOptions]} addLineBreaks />
diff --git a/apps/next-docs/content/getting-started/index.mdx b/apps/next-docs/content/getting-started/index.mdx
index 8b3ca7047d..b15bf91807 100644
--- a/apps/next-docs/content/getting-started/index.mdx
+++ b/apps/next-docs/content/getting-started/index.mdx
@@ -83,7 +83,7 @@ Components can be imported into any React-based application.
 E.g.
 
 ```js
-import {Hero} from '@primer/react-brand'
+import {Button, Hero} from '@primer/react-brand'
 ```
 
 ```jsx
@@ -94,8 +94,14 @@ import {Hero} from '@primer/react-brand'
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
     felis nam pulvinar risus elementum.
   </Hero.Description>
-  <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
-  <Hero.SecondaryAction href="#">Secondary action</Hero.SecondaryAction>
+  <Hero.ButtonGroup>
+    <Button as="a" href="#">
+      Primary action
+    </Button>
+    <Button as="a" href="#">
+      Secondary action
+    </Button>
+  </Hero.ButtonGroup>
 </Hero>
 ```
 
diff --git a/package.json b/package.json
index 87b9c3474c..ed878cbfa1 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "start:docs": "npm run build:lib && cd apps/next-docs && npm run dev",
     "start:lib": "npm run start --workspace=packages/react",
     "start:storybook": "npm run build:lib && npm run start --workspace=apps/storybook",
-    "test": "npm run test --workspaces --if-present",
+    "test": "npm run build:lib && npm run test --workspaces --if-present",
     "test:axe": "npm run test:axe --workspace=packages/e2e",
     "test:storybook": "npm run test:storybook --workspace=apps/storybook",
     "test:visual": "npm run test:visual --workspace=packages/e2e --",
diff --git a/packages/design-tokens/src/tokens/functional/components/river/river.json b/packages/design-tokens/src/tokens/functional/components/river/river.json
index 6149a3dd30..35779195ee 100644
--- a/packages/design-tokens/src/tokens/functional/components/river/river.json
+++ b/packages/design-tokens/src/tokens/functional/components/river/river.json
@@ -31,6 +31,16 @@
     },
     "variant": {
       "gridline": {
+        "visual": {
+          "padding": {
+            "value": "var(--base-size-32)",
+            "responsive": {
+              "1012px": {
+                "value": "var(--base-size-64)"
+              }
+            }
+          }
+        },
         "spacing": {
           "outerBlock": {
             "value": "var(--base-size-40)",
diff --git a/packages/mcp/package.json b/packages/mcp/package.json
index 39f28d4f26..b7df90205b 100644
--- a/packages/mcp/package.json
+++ b/packages/mcp/package.json
@@ -46,6 +46,7 @@
     "format:fix": "prettier --write '**/*.{js,mjs,ts,json,md}'",
     "lint": "eslint '**/*.ts' --max-warnings=0",
     "lint:fix": "npm run lint -- --fix",
+    "pretest": "npm run generate:catalog",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "inspect": "npm run build && npx @modelcontextprotocol/inspector node dist/index.js",
     "smoke": "npm run build && node scripts/smoke.mjs",
diff --git a/packages/mcp/scripts/generate-catalog.mjs b/packages/mcp/scripts/generate-catalog.mjs
index fa27dc408c..f47e8f250b 100644
--- a/packages/mcp/scripts/generate-catalog.mjs
+++ b/packages/mcp/scripts/generate-catalog.mjs
@@ -83,15 +83,17 @@ function discoverComponentFiles() {
 /** Sub-components from `Object.assign(Root, {Heading: ...})` and `Name.Sub = ...` assignments. */
 function extractSubcomponents(name, source) {
   const subcomponents = new Set()
+  // Scan block comments between runs of `*` instead of using a lazy wildcard, which can backtrack
+  // exponentially on repeated comment delimiters such as `*//*`.
+  const propertyPattern =
+    /(?:^|[{,])(?:\s|\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\/|\/\/[^\r\n]*(?:\r?\n|$))*([A-Za-z_$][\w$]*)\s*(?=[:,}])/g
   for (const match of source.matchAll(/Object\.assign\(/g)) {
     const openBraceIndex = source.indexOf('{', match.index)
     if (openBraceIndex === -1) continue
     const assignedObject = captureBalanced(source, openBraceIndex, '{', '}')
     if (!assignedObject) continue
-    // Capture both `Heading: ...` and shorthand `Visual` keys (the latter is a property whose key
-    // is its value, e.g. `Object.assign(Root, {Visual, Content: RiverContent})`).
-    for (const propertyKey of assignedObject.matchAll(/(?:^|[{,])\s*([A-Za-z_$][\w$]*)\s*(?=[:,}])/g))
-      subcomponents.add(`${name}.${propertyKey[1]}`)
+    // Capture `Heading: ...` and shorthand `Visual` keys across intervening comments.
+    for (const propertyKey of assignedObject.matchAll(propertyPattern)) subcomponents.add(`${name}.${propertyKey[1]}`)
   }
   for (const match of source.matchAll(new RegExp(`\\b${name}\\.(\\w+)\\s*=`, 'g'))) {
     subcomponents.add(`${name}.${match[1]}`)
diff --git a/packages/mcp/src/review/rules.test.ts b/packages/mcp/src/review/rules.test.ts
index fd9b6caa89..20c10b62bc 100644
--- a/packages/mcp/src/review/rules.test.ts
+++ b/packages/mcp/src/review/rules.test.ts
@@ -1,4 +1,4 @@
-import {existsSync, readFileSync} from 'node:fs'
+import {readFileSync} from 'node:fs'
 import {fileURLToPath} from 'node:url'
 
 import type {Catalog} from '../catalog/types.js'
@@ -229,19 +229,31 @@ describe('primer_brand_review rules', () => {
 // errors. A failure here means a rule produces false positives against known-correct code.
 describe('primer_brand_review over generated canonical examples', () => {
   const catalogPath = fileURLToPath(new URL('../../dist/catalog.json', import.meta.url))
-  const hasCatalog = existsSync(catalogPath)
-  const testOrSkip = hasCatalog ? it : it.skip
-
-  testOrSkip('produces no errors on any catalog example', () => {
-    const catalog = JSON.parse(readFileSync(catalogPath, 'utf8')) as Catalog
-    const examples = [
-      ...catalog.components.flatMap(component =>
-        component.examples
-          .filter(example => example.code)
-          .map(example => ({name: component.name, code: example.code as string})),
-      ),
-      ...catalog.recipes.map(recipe => ({name: recipe.name, code: recipe.source})),
-    ]
+  const catalog = JSON.parse(readFileSync(catalogPath, 'utf8')) as Catalog
+  const examples = [
+    ...catalog.components.flatMap(component =>
+      component.examples
+        .filter(example => example.code)
+        .map(example => ({name: component.name, code: example.code as string})),
+    ),
+    ...catalog.recipes.map(recipe => ({name: recipe.name, code: recipe.source})),
+  ]
+
+  it('includes object-assigned subcomponents separated by comments', () => {
+    const hero = catalog.components.find(component => component.name === 'Hero')
+    expect(hero?.subcomponents).toEqual(
+      expect.arrayContaining(['Hero.ButtonGroup', 'Hero.PrimaryAction', 'Hero.SecondaryAction']),
+    )
+  })
+
+  it('does not recommend deprecated Hero action subcomponents', () => {
+    for (const example of examples) {
+      const deprecatedActions = example.code.match(/<Hero\.(?:PrimaryAction|SecondaryAction)\b/g) ?? []
+      expect({component: example.name, deprecatedActions}).toEqual({component: example.name, deprecatedActions: []})
+    }
+  })
+
+  it('produces no errors on any catalog example', () => {
     expect(examples.length).toBeGreaterThan(0)
     for (const example of examples) {
       const errors = errorsOf(allRules.flatMap(rule => rule.run(example.code, catalog)))
diff --git a/packages/mcp/src/test-utils/catalog.ts b/packages/mcp/src/test-utils/catalog.ts
index 1c82f75334..daa398bc62 100644
--- a/packages/mcp/src/test-utils/catalog.ts
+++ b/packages/mcp/src/test-utils/catalog.ts
@@ -14,7 +14,7 @@ export function makeCatalog(overrides: Partial<Catalog> = {}): Catalog {
       {
         name: 'Hero',
         module: '@primer/react-brand',
-        subcomponents: ['Hero.Heading', 'Hero.Description', 'Hero.PrimaryAction'],
+        subcomponents: ['Hero.Heading', 'Hero.Description', 'Hero.ButtonGroup', 'Hero.PrimaryAction'],
         props: [
           {
             name: 'align',
@@ -29,7 +29,12 @@ export function makeCatalog(overrides: Partial<Catalog> = {}): Catalog {
           {
             title: 'Hero example',
             source: 'story',
-            code: '<Hero align="center"><Hero.Heading>Build like the best</Hero.Heading></Hero>',
+            code: `<Hero align="center">
+  <Hero.Heading>Build like the best</Hero.Heading>
+  <Hero.ButtonGroup>
+    <Button>Get started</Button>
+  </Hero.ButtonGroup>
+</Hero>`,
           },
         ],
         description: 'Prominent banner for the top of a landing page',
diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx
index 9ecc9d1285..f892277c22 100644
--- a/packages/react/src/ActionMenu/ActionMenu.tsx
+++ b/packages/react/src/ActionMenu/ActionMenu.tsx
@@ -12,7 +12,9 @@ import React, {
   ReactElement,
   useMemo,
 } from 'react'
-import {Button, ButtonProps, Text, ThemeProvider, useTheme} from '../'
+import {Button, ButtonProps} from '../Button'
+import {Text} from '../Text'
+import {ThemeProvider, useTheme} from '../ThemeProvider'
 import {useAnchoredPosition} from '../hooks/useAnchoredPosition'
 import {useOnClickOutside} from '../hooks/useOnClickOutside'
 import {useKeyboardEscape} from '../hooks/useKeyboardEscape'
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
index c02b3ad288..8886c9db68 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
@@ -2,11 +2,12 @@ import React from 'react'
 import type {Meta, StoryObj} from '@storybook/react'
 import {ButtonGroup} from '.'
 import {Button} from '../Button'
+import {ActionMenu} from '../ActionMenu'
 
 const meta = {
   title: 'Components/ButtonGroup',
   component: ButtonGroup,
-  subcomponents: {Button},
+  subcomponents: {Button, ActionMenu},
   args: {
     buttonSize: 'medium',
     buttonsAs: 'button',
@@ -16,7 +17,7 @@ const meta = {
       description: 'The size of the button elements',
       control: {
         type: 'radio',
-        options: ['medium', 'large'],
+        options: ['small', 'medium', 'large'],
       },
     },
     buttonsAs: {
@@ -58,6 +59,36 @@ export const SingleButtonGroup: Story = {
   ),
 }
 
+export const WithActionMenu: Story = {
+  render: args => (
+    <ButtonGroup {...args}>
+      <Button>Primary action</Button>
+      <ActionMenu>
+        <ActionMenu.Button>More actions</ActionMenu.Button>
+        <ActionMenu.Overlay aria-label="More actions">
+          <ActionMenu.Item value="Contact sales">Contact sales</ActionMenu.Item>
+          <ActionMenu.Item value="View pricing">View pricing</ActionMenu.Item>
+        </ActionMenu.Overlay>
+      </ActionMenu>
+    </ButtonGroup>
+  ),
+}
+
+export const WithVariantOverrides: Story = {
+  render: args => (
+    <ButtonGroup {...args}>
+      <Button variant="secondary">Secondary override</Button>
+      <ActionMenu>
+        <ActionMenu.Button variant="primary">Primary override</ActionMenu.Button>
+        <ActionMenu.Overlay aria-label="More actions">
+          <ActionMenu.Item value="Contact sales">Contact sales</ActionMenu.Item>
+          <ActionMenu.Item value="View pricing">View pricing</ActionMenu.Item>
+        </ActionMenu.Overlay>
+      </ActionMenu>
+    </ButtonGroup>
+  ),
+}
+
 export const LargeButtonGroup: Story = {
   ...Template,
   args: {
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.test.tsx b/packages/react/src/ButtonGroup/ButtonGroup.test.tsx
index 0e103c2957..362756dfd5 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.test.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.test.tsx
@@ -1,13 +1,30 @@
-import {render, cleanup} from '@testing-library/react'
+import {render, cleanup, fireEvent} from '@testing-library/react'
 import '@testing-library/jest-dom'
 
 import {ButtonGroup} from './ButtonGroup'
 import {Button} from '../Button'
+import {ActionMenu} from '../ActionMenu'
 import {axe, toHaveNoViolations} from 'jest-axe'
 
 expect.extend(toHaveNoViolations)
 
 describe('ButtonGroup', () => {
+  beforeAll(() => {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation(query => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+      })),
+    })
+  })
+
   afterEach(cleanup)
 
   it('renders correctly into the document', () => {
@@ -65,7 +82,7 @@ describe('ButtonGroup', () => {
     expect(buttonEl.classList).toContain(expectedClass)
   })
 
-  it('applies primary variant automatically to the first button and subtle variant to second', () => {
+  it('applies primary variant automatically to the first button and secondary variant to second', () => {
     const {getAllByRole} = render(
       <ButtonGroup>
         <Button>Primary Action</Button>
@@ -74,7 +91,7 @@ describe('ButtonGroup', () => {
     )
     const buttons = getAllByRole('button')
     expect(buttons[0].classList).toContain('Button--primary')
-    expect(buttons[1].classList).toContain('Button--subtle')
+    expect(buttons[1].classList).toContain('Button--secondary')
   })
 
   it('does not render arrows on buttons by default', () => {
@@ -100,6 +117,84 @@ describe('ButtonGroup', () => {
     expect(buttons[1].classList).toContain('Button--secondary')
   })
 
+  it('renders ActionMenu as valid children', () => {
+    const {getByRole} = render(
+      <ButtonGroup>
+        <Button>Primary Action</Button>
+        <ActionMenu size="small">
+          <ActionMenu.Button>More actions</ActionMenu.Button>
+          <ActionMenu.Overlay aria-label="More actions">
+            <ActionMenu.Item value="Contact sales">Contact sales</ActionMenu.Item>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+      </ButtonGroup>,
+    )
+
+    const menuButton = getByRole('button', {name: 'More actions'})
+    expect(menuButton).toHaveClass('Button--size-small')
+    expect(menuButton).toHaveClass('Button--secondary')
+
+    fireEvent.click(menuButton)
+
+    expect(getByRole('menu', {name: 'More actions'})).toBeInTheDocument()
+  })
+
+  it.each([
+    ['small', 'small'],
+    ['medium', 'medium'],
+    ['large', 'medium'],
+  ] as const)('applies the %s group size to ActionMenu as %s', (buttonSize, expectedSize) => {
+    const {getByRole} = render(
+      <ButtonGroup buttonSize={buttonSize}>
+        <ActionMenu>
+          <ActionMenu.Button>More actions</ActionMenu.Button>
+          <ActionMenu.Overlay aria-label="More actions">
+            <ActionMenu.Item value="Contact sales">Contact sales</ActionMenu.Item>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+      </ButtonGroup>,
+    )
+
+    expect(getByRole('button', {name: 'More actions'})).toHaveClass(`Button--size-${expectedSize}`)
+  })
+
+  it('applies variants automatically to ActionMenu children', () => {
+    const {getByRole} = render(
+      <ButtonGroup>
+        <ActionMenu>
+          <ActionMenu.Button>Primary actions</ActionMenu.Button>
+          <ActionMenu.Overlay aria-label="Primary actions">
+            <ActionMenu.Item value="Primary action">Primary action</ActionMenu.Item>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+        <ActionMenu>
+          <ActionMenu.Button>Secondary actions</ActionMenu.Button>
+          <ActionMenu.Overlay aria-label="Secondary actions">
+            <ActionMenu.Item value="Secondary action">Secondary action</ActionMenu.Item>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+      </ButtonGroup>,
+    )
+
+    expect(getByRole('button', {name: 'Primary actions'})).toHaveClass('Button--primary')
+    expect(getByRole('button', {name: 'Secondary actions'})).toHaveClass('Button--secondary')
+  })
+
+  it('allows ActionMenu.Button variants to override automatic variants', () => {
+    const {getByRole} = render(
+      <ButtonGroup>
+        <ActionMenu>
+          <ActionMenu.Button variant="secondary">More actions</ActionMenu.Button>
+          <ActionMenu.Overlay aria-label="More actions">
+            <ActionMenu.Item value="Contact sales">Contact sales</ActionMenu.Item>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+      </ButtonGroup>,
+    )
+
+    expect(getByRole('button', {name: 'More actions'})).toHaveClass('Button--secondary')
+  })
+
   it('has no axe violations', async () => {
     const {container} = render(
       <ButtonGroup>
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx
index 68b1ecb6aa..f26dabd32f 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx
@@ -2,12 +2,14 @@ import React, {forwardRef, type Ref} from 'react'
 import {clsx} from 'clsx'
 import type {BaseProps} from '../component-helpers'
 import {Button, ButtonProps} from '../Button'
+import {ActionMenu, ActionMenuProps} from '../ActionMenu'
 import styles from './ButtonGroup.module.css'
 
 export type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' | 'a'>>>
+export type PrimerBrandActionMenuType = React.ReactElement<ActionMenuProps>
 
 export type ButtonGroupProps = BaseProps<HTMLDivElement> & {
-  children: PrimerBrandButtonType[] | PrimerBrandButtonType
+  children: Array<PrimerBrandButtonType | PrimerBrandActionMenuType> | PrimerBrandButtonType | PrimerBrandActionMenuType
   buttonSize?: ButtonProps<'button' | 'a'>['size']
   buttonsAs?: 'button' | 'a'
 }
@@ -15,23 +17,45 @@ export type ButtonGroupProps = BaseProps<HTMLDivElement> & {
 export const ButtonGroup = forwardRef(
   ({buttonSize = 'medium', buttonsAs, className, children, ...props}: ButtonGroupProps, ref: Ref<HTMLDivElement>) => {
     const buttonsToRender = React.Children.toArray(children)
+      .filter(
+        (child): child is React.ReactElement =>
+          React.isValidElement(child) && (child.type === Button || child.type === ActionMenu),
+      )
+      .slice(0, 2)
       .map((child, index) => {
+        const variant = index === 0 ? 'primary' : 'secondary'
+
         if (React.isValidElement<ButtonProps<'button' | 'a'>>(child) && child.type === Button) {
           return React.cloneElement(child, {
-            size: buttonSize,
-            as: buttonsAs,
-            variant: index === 0 ? 'primary' : 'subtle',
-            ...child.props,
+            size: child.props.size ?? buttonSize,
+            as: child.props.as ?? buttonsAs,
+            variant: child.props.variant ?? variant,
           })
         }
-        return null
+
+        const actionMenu = child as PrimerBrandActionMenuType
+        const actionMenuSize = buttonSize === 'large' ? 'medium' : buttonSize
+        const actionMenuChildren = React.Children.map(actionMenu.props.children, actionMenuChild => {
+          if (
+            React.isValidElement<React.ComponentProps<typeof ActionMenu.Button>>(actionMenuChild) &&
+            actionMenuChild.type === ActionMenu.Button
+          ) {
+            return React.cloneElement(actionMenuChild, {
+              variant: actionMenuChild.props.variant ?? variant,
+            })
+          }
+          return actionMenuChild
+        })
+
+        return React.cloneElement(actionMenu, {
+          children: actionMenuChildren,
+          size: actionMenu.props.size ?? actionMenuSize,
+        })
       })
-      .filter(Boolean)
-      .slice(0, 2)
 
     return (
       <section ref={ref} {...props} className={clsx(styles.ButtonGroup, className)}>
-        {buttonsToRender as React.ReactElement[]}
+        {buttonsToRender}
       </section>
     )
   },
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.visual.spec.ts b/packages/react/src/ButtonGroup/ButtonGroup.visual.spec.ts
index 78a8f2e46a..ec5291bc59 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.visual.spec.ts
+++ b/packages/react/src/ButtonGroup/ButtonGroup.visual.spec.ts
@@ -28,6 +28,28 @@ test.describe('Visual Comparison: ButtonGroup', () => {
     await expect(page).toHaveScreenshot({fullPage: true})
   })
 
+  test('ButtonGroup / With Action Menu', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-buttongroup--with-action-menu&viewMode=story',
+      {waitUntil: 'networkidle'},
+    )
+    await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+    await page.waitForTimeout(500)
+    await expect(page).toHaveScreenshot({fullPage: true})
+  })
+
+  test('ButtonGroup / With Variant Overrides', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-buttongroup--with-variant-overrides&viewMode=story',
+      {waitUntil: 'networkidle'},
+    )
+    await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+    await page.waitForTimeout(500)
+    await expect(page).toHaveScreenshot({fullPage: true})
+  })
+
   test('ButtonGroup / Large Button Group', async ({page}) => {
     await page.goto(
       'http://localhost:6006/iframe.html?args=&id=components-buttongroup--large-button-group&viewMode=story',
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.visual.spec.ts-snapshots/Visual-Comparison-ButtonGroup-ButtonGroup-With-Action-Menu-1-darwin.png b/packages/react/src/ButtonGroup/ButtonGroup.visual.spec.ts-snapshots/Visual-Comparison-ButtonGroup-ButtonGroup-With-Action-Menu-1-darwin.png
new file mode 100644
index 0000000000..9e0d7e6d55
Binary files /dev/null and b/packages/react/src/ButtonGroup/ButtonGroup.visual.spec.ts-snapshots/Visual-Comparison-ButtonGroup-ButtonGroup-With-Action-Menu-1-darwin.png differ
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.visual.spec.ts-snapshots/Visual-Comparison-ButtonGroup-ButtonGroup-With-Variant-Overrides-1-darwin.png b/packages/react/src/ButtonGroup/ButtonGroup.visual.spec.ts-snapshots/Visual-Comparison-ButtonGroup-ButtonGroup-With-Variant-Overrides-1-darwin.png
new file mode 100644
index 0000000000..110094e327
Binary files /dev/null and b/packages/react/src/ButtonGroup/ButtonGroup.visual.spec.ts-snapshots/Visual-Comparison-ButtonGroup-ButtonGroup-With-Variant-Overrides-1-darwin.png differ
diff --git a/packages/react/src/CTABanner/CTABanner.features.stories.tsx b/packages/react/src/CTABanner/CTABanner.features.stories.tsx
index 2dc52a0136..95f8401f7b 100644
--- a/packages/react/src/CTABanner/CTABanner.features.stories.tsx
+++ b/packages/react/src/CTABanner/CTABanner.features.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import type {Meta, StoryObj} from '@storybook/react'
 import {GlobeIcon} from '@primer/octovisuals-react'
 import {Button} from '../Button'
+import {ActionMenu} from '../ActionMenu'
 
 import {CTABanner} from './CTABanner'
 import {Grid, InlineLink, Section, Stack, Text, TextCursorAnimation, ThemeProvider} from '../'
@@ -100,6 +101,25 @@ function WithImageExample() {
   )
 }
 
+export const WithActionMenu: Story = {
+  render: () => (
+    <CTABanner>
+      <CTABanner.Heading>Where the most ambitious teams build great things</CTABanner.Heading>
+      <CTABanner.Description>Get real-time suggestions and ship confidently.</CTABanner.Description>
+      <CTABanner.ButtonGroup>
+        <Button>Get started for free</Button>
+        <ActionMenu>
+          <ActionMenu.Button>More actions</ActionMenu.Button>
+          <ActionMenu.Overlay aria-label="More actions">
+            <ActionMenu.Item value="Contact sales">Contact sales</ActionMenu.Item>
+            <ActionMenu.Item value="View pricing">View pricing</ActionMenu.Item>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+      </CTABanner.ButtonGroup>
+    </CTABanner>
+  ),
+}
+
 export const Variants: Story = {
   render: () => (
     <Stack direction="vertical" gap="spacious" padding="none">
@@ -110,7 +130,7 @@ export const Variants: Story = {
           turpis felis nam pulvinar risus elementum.
         </CTABanner.Description>
         <CTABanner.ButtonGroup>
-          <Button variant="primary">Get started for free</Button>
+          <Button>Get started for free</Button>
           <Button>View docs</Button>
         </CTABanner.ButtonGroup>
       </CTABanner>
@@ -122,7 +142,7 @@ export const Variants: Story = {
         </CTABanner.Description>
         <CTABanner.Image src={placeholderImage} alt="Blank image" />
         <CTABanner.ButtonGroup>
-          <Button variant="primary">Get started for free</Button>
+          <Button>Get started for free</Button>
           <Button>View docs</Button>
         </CTABanner.ButtonGroup>
       </CTABanner>
@@ -133,7 +153,7 @@ export const Variants: Story = {
           turpis felis nam pulvinar risus elementum.
         </CTABanner.Description>
         <CTABanner.ButtonGroup>
-          <Button variant="primary">Get started for free</Button>
+          <Button>Get started for free</Button>
           <Button>View docs</Button>
         </CTABanner.ButtonGroup>
       </CTABanner>
@@ -146,7 +166,7 @@ export const WithPrimaryButton: Story = {
     <CTABanner>
       <CTABanner.Heading size="2">Start coding in seconds with Codespaces</CTABanner.Heading>
       <CTABanner.ButtonGroup>
-        <Button variant="primary">Get started for free</Button>
+        <Button>Get started for free</Button>
         <Button>View docs</Button>
       </CTABanner.ButtonGroup>
     </CTABanner>
@@ -523,7 +543,7 @@ export const WithLogo: Story = {
           turpis felis nam pulvinar risus elementum.
         </CTABanner.Description>
         <CTABanner.ButtonGroup>
-          <Button variant="primary">Get started for free</Button>
+          <Button>Get started for free</Button>
           <Button>View docs</Button>
         </CTABanner.ButtonGroup>
       </CTABanner>
@@ -545,7 +565,7 @@ export const WithLogo: Story = {
           turpis felis nam pulvinar risus elementum.
         </CTABanner.Description>
         <CTABanner.ButtonGroup>
-          <Button variant="primary">Get started for free</Button>
+          <Button>Get started for free</Button>
           <Button>View docs</Button>
         </CTABanner.ButtonGroup>
       </CTABanner>
@@ -595,7 +615,7 @@ export const WithDuotoneText: Story = {
           Use <b>duotone emphasis</b> to highlight key parts of your headline. Wrap text in a <code>b</code> tag.
         </CTABanner.Description>
         <CTABanner.ButtonGroup>
-          <Button variant="primary">Get started for free</Button>
+          <Button>Get started for free</Button>
           <Button>View docs</Button>
         </CTABanner.ButtonGroup>
       </CTABanner>
@@ -607,7 +627,7 @@ export const WithDuotoneText: Story = {
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id.
         </CTABanner.Description>
         <CTABanner.ButtonGroup>
-          <Button variant="primary">Get started for free</Button>
+          <Button>Get started for free</Button>
           <Button>View docs</Button>
         </CTABanner.ButtonGroup>
         <CTABanner.Image src={placeholderImage} alt="Blank image" />
@@ -620,7 +640,7 @@ export const WithDuotoneText: Story = {
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id.
         </CTABanner.Description>
         <CTABanner.ButtonGroup>
-          <Button variant="primary">Get started for free</Button>
+          <Button>Get started for free</Button>
           <Button>View docs</Button>
         </CTABanner.ButtonGroup>
       </CTABanner>
diff --git a/packages/react/src/CTABanner/CTABanner.test.tsx b/packages/react/src/CTABanner/CTABanner.test.tsx
index e171ce79be..3fcbd30dec 100644
--- a/packages/react/src/CTABanner/CTABanner.test.tsx
+++ b/packages/react/src/CTABanner/CTABanner.test.tsx
@@ -48,6 +48,22 @@ describe('CTABanner', () => {
     expect(ctaBannerEl.classList).toContain(expectedCustomClass)
   })
 
+  it('applies primary and secondary variants to ButtonGroup actions', () => {
+    const {getAllByRole} = render(
+      <CTABanner>
+        <CTABanner.Heading>Where the most ambitious teams build great things</CTABanner.Heading>
+        <CTABanner.ButtonGroup>
+          <Button>Primary Action</Button>
+          <Button>Secondary Action</Button>
+        </CTABanner.ButtonGroup>
+      </CTABanner>,
+    )
+
+    const buttons = getAllByRole('button')
+    expect(buttons[0]).toHaveClass('Button--primary')
+    expect(buttons[1]).toHaveClass('Button--secondary')
+  })
+
   it('renders the correct default heading type', () => {
     const expectedTag = 'h3'
     const headingText = 'This is your heading'
diff --git a/packages/react/src/CTABanner/CTABanner.visual.spec.ts b/packages/react/src/CTABanner/CTABanner.visual.spec.ts
index 3789da882d..4ff4528bcf 100644
--- a/packages/react/src/CTABanner/CTABanner.visual.spec.ts
+++ b/packages/react/src/CTABanner/CTABanner.visual.spec.ts
@@ -27,6 +27,17 @@ test.describe('Visual Comparison: CTABanner', () => {
     await expect(page).toHaveScreenshot({fullPage: true})
   })
 
+  test('CTABanner / With Action Menu', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-ctabanner-features--with-action-menu&viewMode=story',
+      {waitUntil: 'networkidle'},
+    )
+    await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+    await page.waitForTimeout(500)
+    await expect(page).toHaveScreenshot({fullPage: true})
+  })
+
   test('CTABanner / Variants', async ({page}) => {
     await page.goto(
       'http://localhost:6006/iframe.html?args=&id=components-ctabanner-features--variants&viewMode=story',
diff --git a/packages/react/src/CTABanner/CTABanner.visual.spec.ts-snapshots/Visual-Comparison-CTABanner-CTABanner-With-Action-Menu-1-darwin.png b/packages/react/src/CTABanner/CTABanner.visual.spec.ts-snapshots/Visual-Comparison-CTABanner-CTABanner-With-Action-Menu-1-darwin.png
new file mode 100644
index 0000000000..ab2ae8dffa
Binary files /dev/null and b/packages/react/src/CTABanner/CTABanner.visual.spec.ts-snapshots/Visual-Comparison-CTABanner-CTABanner-With-Action-Menu-1-darwin.png differ
diff --git a/packages/react/src/Hero/Hero.examples.stories.tsx b/packages/react/src/Hero/Hero.examples.stories.tsx
index 316362ce7d..54288b912e 100644
--- a/packages/react/src/Hero/Hero.examples.stories.tsx
+++ b/packages/react/src/Hero/Hero.examples.stories.tsx
@@ -26,6 +26,7 @@ import {ActionMenu} from '../ActionMenu'
 import {CheckIcon, CopyIcon} from '@primer/octicons-react'
 import {Button} from '../Button'
 import {ThemeProvider} from '../ThemeProvider'
+import {Token} from '../Token'
 
 const meta = {
   title: 'Components/Hero/Examples',
@@ -51,7 +52,11 @@ export const Default: Story = {
         </>
       </Hero.Heading>
       <Hero.Description>Visual Studio Code backed by high performance VMs that start in seconds.</Hero.Description>
-      <Hero.PrimaryAction href="#">Get started</Hero.PrimaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Get started
+        </Button>
+      </Hero.ButtonGroup>
     </Hero>
   ),
 }
@@ -76,8 +81,14 @@ export const CustomBackgroundBlockEndImage: Story = {
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
             turpis felis nam pulvinar risus elementum.
           </Hero.Description>
-          <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
-          <Hero.SecondaryAction href="#">Secondary action</Hero.SecondaryAction>
+          <Hero.ButtonGroup>
+            <Button as="a" href="#">
+              Primary action
+            </Button>
+            <Button as="a" href="#">
+              Secondary action
+            </Button>
+          </Hero.ButtonGroup>
 
           <Hero.Image src={renderUI3} alt="" enableBorder={false} />
         </Hero>
@@ -105,9 +116,15 @@ export const CustomBackgroundInlineEndPaddedImage: Story = {
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
           turpis felis nam pulvinar risus elementum.
         </Hero.Description>
-        <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
-        <Hero.SecondaryAction href="#">Secondary action</Hero.SecondaryAction>
-        <Hero.Image position="inline-end-padded" src={renderUI3} alt="" enableBorder={false} />
+        <Hero.ButtonGroup>
+          <Button as="a" href="#">
+            Primary action
+          </Button>
+          <Button as="a" href="#">
+            Secondary action
+          </Button>
+        </Hero.ButtonGroup>
+        <Hero.Image position="inline-end" padding="all" src={renderUI3} alt="" enableBorder={false} />
       </Hero>
     )
   },
@@ -133,8 +150,14 @@ export const CustomBackgroundBlockEndVideo: Story = {
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
             turpis felis nam pulvinar risus elementum.
           </Hero.Description>
-          <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
-          <Hero.SecondaryAction href="#">Secondary action</Hero.SecondaryAction>
+          <Hero.ButtonGroup>
+            <Button as="a" href="#">
+              Primary action
+            </Button>
+            <Button as="a" href="#">
+              Secondary action
+            </Button>
+          </Hero.ButtonGroup>
 
           <Hero.Video enableBorder={false}>
             <VideoPlayer title="GitHub media player" poster={posterImage}>
@@ -167,9 +190,15 @@ export const CustomBackgroundInlineEndPaddedVideo: Story = {
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
           turpis felis nam pulvinar risus elementum.
         </Hero.Description>
-        <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
-        <Hero.SecondaryAction href="#">Secondary action</Hero.SecondaryAction>
-        <Hero.Video position="inline-end-padded" enableBorder={false}>
+        <Hero.ButtonGroup>
+          <Button as="a" href="#">
+            Primary action
+          </Button>
+          <Button as="a" href="#">
+            Secondary action
+          </Button>
+        </Hero.ButtonGroup>
+        <Hero.Video position="inline-end" padding="all" enableBorder={false}>
           <VideoPlayer title="GitHub media player" poster={posterImage}>
             <VideoPlayer.Source src="./example.mp4" type="video/mp4" />
             <VideoPlayer.Track src="./example.vtt" default />
@@ -189,25 +218,36 @@ export const WithCards: Story = {
         borderBlockEndWidth="thin"
         borderStyle="solid"
         borderColor="muted"
-        backgroundColor="overlay"
         style={{'--brand-Hero-bgColor-gridlineGridInner': 'var(--brand-color-canvas-default)'} as React.CSSProperties}
-        className={styles.heroWithCardsExample}
       >
-        <Hero align="center" variant="gridline">
+        <Hero
+          align="center"
+          variant="gridline"
+          trailingComponent={() => (
+            <Text variant="muted">
+              Already have Visual Studio Code? <InlineLink href="#">Open now</InlineLink>
+            </Text>
+          )}
+        >
           <Hero.Label>Projects</Hero.Label>
           <Hero.Heading>Project planning for developers</Hero.Heading>
           <Hero.Description>
             Create issues, break them into tasks, track relationships, add custom fields, and have conversations.
             Visualize large projects as spreadsheets or boards, and automate everything with code.
           </Hero.Description>
-          <Hero.PrimaryAction href="#">Watch video</Hero.PrimaryAction>
-          <Hero.SecondaryAction href="#">Start using project tables</Hero.SecondaryAction>
+          <Hero.ButtonGroup>
+            <Button as="a" href="#">
+              Watch video
+            </Button>
+            <Button as="a" href="#">
+              Start using project tables
+            </Button>
+          </Hero.ButtonGroup>
         </Hero>
 
         <Grid style={{paddingInline: 0}}>
           <Grid.Column>
             <Box
-              backgroundColor="var(--customCardsBackgroundColor)"
               borderColor="muted"
               borderStyle="solid"
               borderBlockStartWidth="thin"
@@ -223,6 +263,10 @@ export const WithCards: Story = {
                 <Grid.Column span={{xsmall: 12, large: 4}}>
                   <Box padding={{narrow: 32, regular: 48}}>
                     <Card href="#" variant="minimal" fullWidth>
+                      <Card.Tokens>
+                        <Token>Topic</Token>
+                        <Token variant="outline">Dec 25</Token>
+                      </Card.Tokens>
                       <Card.Heading as="h2">Code search & code view</Card.Heading>
                       <Card.Description>
                         Enables you to rapidly search, navigate, and understand code, right from GitHub.com.
@@ -247,6 +291,10 @@ export const WithCards: Story = {
                     borderInlineStartWidth={{wide: 'thin'}}
                   >
                     <Card href="#" variant="minimal" fullWidth>
+                      <Card.Tokens>
+                        <Token>Topic</Token>
+                        <Token variant="outline">Dec 25</Token>
+                      </Card.Tokens>
                       <Card.Image
                         position="block-end"
                         src={defaultPlaceholderImgae}
@@ -263,6 +311,10 @@ export const WithCards: Story = {
                 <Grid.Column span={{xsmall: 12, large: 4}}>
                   <Box padding={{narrow: 32, regular: 48}}>
                     <Card href="#" variant="minimal" fullWidth>
+                      <Card.Tokens>
+                        <Token>Topic</Token>
+                        <Token variant="outline">Dec 25</Token>
+                      </Card.Tokens>
                       <Card.Image
                         position="block-end"
                         src={defaultPlaceholderImgae}
@@ -309,8 +361,14 @@ export const GridlineExpressiveBlockEndPaddedTrailingComponent: Story = {
         <Hero.Label>GitHub Copilot</Hero.Label>
         <Hero.Heading>Command your craft</Hero.Heading>
         <Hero.Description>Your AI accelerator for every workflow, from the editor to the enterprise.</Hero.Description>
-        <Hero.PrimaryAction href="#">Try Copilot now</Hero.PrimaryAction>
-        <Hero.SecondaryAction href="#">See plans & pricing</Hero.SecondaryAction>
+        <Hero.ButtonGroup>
+          <Button as="a" href="#">
+            Try Copilot now
+          </Button>
+          <Button as="a" href="#">
+            See plans & pricing
+          </Button>
+        </Hero.ButtonGroup>
         <Hero.Image
           enableBorder={false}
           position="block-end"
@@ -346,7 +404,6 @@ export const GridlineExpressiveWithImageCarousel: Story = {
         borderStyle="solid"
         borderColor="muted"
         style={{'--brand-Hero-bgColor-gridlineGridInner': 'var(--brand-color-canvas-default)'} as React.CSSProperties}
-        className={styles.heroWithCardsExample}
       >
         <Hero variant="gridline-expressive" enableAnimation>
           <Hero.Label>Projects</Hero.Label>
@@ -357,14 +414,20 @@ export const GridlineExpressiveWithImageCarousel: Story = {
             Create issues, break them into tasks, track relationships, add custom fields, and have conversations.
             Visualize large projects as spreadsheets or boards, and automate everything with code.
           </Hero.Description>
-          <Hero.PrimaryAction href="#">Watch video</Hero.PrimaryAction>
-          <Hero.SecondaryAction href="#">Start using project tables</Hero.SecondaryAction>
+          <Hero.ButtonGroup>
+            <Button as="a" href="#">
+              Watch video
+            </Button>
+            <Button as="a" href="#">
+              Start using project tables
+            </Button>
+          </Hero.ButtonGroup>
         </Hero>
 
         <Box borderBlockStartWidth="thin" borderStyle="solid" borderColor="muted">
           <Grid style={{paddingInline: 0}}>
             <Grid.Column>
-              <Box ref={imageRef} backgroundColor="var(--customCardsBackgroundColor)" borderColor="muted">
+              <Box ref={imageRef} borderColor="muted">
                 <AnimationProvider autoStaggerChildren={false} animationTrigger="immediate" runOnce>
                   <Stack alignItems="center" padding="none">
                     <Box
@@ -555,7 +618,9 @@ export const WithCustomInput: Story = {
         <>
           <Box paddingBlockStart={16} className={styles['d-lg-none']}>
             <Stack padding="none" gap="condensed" direction={{narrow: 'vertical', regular: 'horizontal'}}>
-              <Hero.PrimaryAction href="#">See documentation</Hero.PrimaryAction>
+              <Button as="a" href="#" variant="primary">
+                See documentation
+              </Button>
             </Stack>
           </Box>
           <Stack direction="vertical" padding="none" className={styles['d-none-d-lg-block']}>
diff --git a/packages/react/src/Hero/Hero.features.stories.tsx b/packages/react/src/Hero/Hero.features.stories.tsx
index 44feee11c3..ff3bb830e6 100644
--- a/packages/react/src/Hero/Hero.features.stories.tsx
+++ b/packages/react/src/Hero/Hero.features.stories.tsx
@@ -4,6 +4,7 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {HeartFillIcon, PlayIcon, StarFillIcon} from '@primer/octicons-react'
 
 import {Hero} from '.'
+import {Button} from '../Button'
 import {ActionMenu} from '../ActionMenu'
 import {Grid} from '../Grid'
 import {EyebrowBanner} from '../EyebrowBanner'
@@ -28,7 +29,11 @@ export const Centered: Story = {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
         felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
     </Hero>
   ),
 }
@@ -42,7 +47,11 @@ export const WithIncreasedContrastDescription: Story = {
         This description has increased contrast for better readability. Lorem ipsum dolor sit amet, consectetur
         adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
     </Hero>
   ),
 }
@@ -58,7 +67,11 @@ export const WithAnimatedLabel: Story = {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
         felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
     </Hero>
   ),
 }
@@ -74,7 +87,11 @@ export const WithIncreasedContrastLabel: Story = {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
         felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
     </Hero>
   ),
 }
@@ -88,12 +105,14 @@ export const WithPrimaryButton: Story = {
         Create issues, break them into tasks, track relationships, add custom fields, and have conversations. Visualize
         large projects as tables, boards, or roadmaps, and automate everything with code.
       </Hero.Description>
-      <Hero.PrimaryAction variant="primary" href="#">
-        Start using projects
-      </Hero.PrimaryAction>
-      <Hero.SecondaryAction href="#" trailingVisual={<PlayIcon />}>
-        What is GitHub Issues
-      </Hero.SecondaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Start using projects
+        </Button>
+        <Button as="a" href="#" trailingVisual={<PlayIcon />}>
+          What is GitHub Issues
+        </Button>
+      </Hero.ButtonGroup>
     </Hero>
   ),
 }
@@ -103,12 +122,16 @@ export const WithoutDescription: Story = {
     <Hero>
       <Hero.Label>Label</Hero.Label>
       <Hero.Heading>This is my super sweet hero heading</Hero.Heading>
-      <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
     </Hero>
   ),
 }
 
-export const WithSecondaryAction: Story = {
+export const WithLegacyPrimaryAndSecondaryActions: Story = {
   render: () => (
     <Hero>
       <Hero.Label>Label</Hero.Label>
@@ -123,6 +146,41 @@ export const WithSecondaryAction: Story = {
   ),
 }
 
+export const WithActionMenu: Story = {
+  render: () => (
+    <Hero>
+      <Hero.Label>Label</Hero.Label>
+      <Hero.Heading>This is my super sweet hero heading</Hero.Heading>
+      <Hero.Description>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
+        felis nam pulvinar risus elementum.
+      </Hero.Description>
+      <Hero.ButtonGroup>
+        <ActionMenu mode="split-button">
+          <ActionMenu.Button as="a" href="#test">
+            Primary actions
+          </ActionMenu.Button>
+          <ActionMenu.Overlay aria-label="More actions">
+            <ActionMenu.Item as="a" href="#contact-sales">
+              Contact sales
+            </ActionMenu.Item>
+            <ActionMenu.Item as="a" href="#view-pricing">
+              View pricing
+            </ActionMenu.Item>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+        <ActionMenu>
+          <ActionMenu.Button>Secondary actions</ActionMenu.Button>
+          <ActionMenu.Overlay aria-label="More actions">
+            <ActionMenu.Item value="Contact sales">Contact sales</ActionMenu.Item>
+            <ActionMenu.Item value="View pricing">View pricing</ActionMenu.Item>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+      </Hero.ButtonGroup>
+    </Hero>
+  ),
+}
+
 const ExampleTrailingComponent = () => (
   <ActionMenu>
     <ActionMenu.Button>Open menu</ActionMenu.Button>
@@ -161,12 +219,14 @@ export const WithCustomClassnames: Story = {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
         felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#" className="test-class">
-        Primary action
-      </Hero.PrimaryAction>
-      <Hero.SecondaryAction href="#" className="test-class">
-        Secondary action
-      </Hero.SecondaryAction>
+      <Hero.ButtonGroup className="test-class">
+        <Button as="a" href="#" className="test-class">
+          Primary action
+        </Button>
+        <Button as="a" href="#" className="test-class">
+          Secondary action
+        </Button>
+      </Hero.ButtonGroup>
     </Hero>
   ),
 }
@@ -180,12 +240,14 @@ export const WithCustomHeadingAndDescriptionSizes: Story = {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
         felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#" className="test-class">
-        Primary action
-      </Hero.PrimaryAction>
-      <Hero.SecondaryAction href="#" className="test-class">
-        Secondary action
-      </Hero.SecondaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#" className="test-class">
+          Primary action
+        </Button>
+        <Button as="a" href="#" className="test-class">
+          Secondary action
+        </Button>
+      </Hero.ButtonGroup>
     </Hero>
   ),
 }
@@ -200,12 +262,14 @@ export const WithCustomIconAndVariant: Story = {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
         felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#" leadingVisual={<HeartFillIcon />}>
-        Primary action with leading icon
-      </Hero.PrimaryAction>
-      <Hero.SecondaryAction href="#" trailingVisual={<StarFillIcon />} variant="subtle">
-        Subtle action with trailing icon
-      </Hero.SecondaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#" leadingVisual={<HeartFillIcon />}>
+          Primary action with leading icon
+        </Button>
+        <Button as="a" href="#" trailingVisual={<StarFillIcon />} variant="subtle">
+          Subtle action with trailing icon
+        </Button>
+      </Hero.ButtonGroup>
     </Hero>
   ),
 }
@@ -219,8 +283,14 @@ export const NarrowView: Story = {
         Create issues, break them into tasks, track relationships, add custom fields, and have conversations. Visualize
         large projects as spreadsheets or boards, and automate everything with code.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Watch video</Hero.PrimaryAction>
-      <Hero.SecondaryAction href="#">Start using project tables</Hero.SecondaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Watch video
+        </Button>
+        <Button as="a" href="#">
+          Start using project tables
+        </Button>
+      </Hero.ButtonGroup>
     </Hero>
   ),
   globals: {
@@ -236,8 +306,14 @@ export const NarrowViewCentered: Story = {
         Create issues, break them into tasks, track relationships, add custom fields, and have conversations. Visualize
         large projects as spreadsheets or boards, and automate everything with code.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Watch video</Hero.PrimaryAction>
-      <Hero.SecondaryAction href="#">Start using project tables</Hero.SecondaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Watch video
+        </Button>
+        <Button as="a" href="#">
+          Start using project tables
+        </Button>
+      </Hero.ButtonGroup>
     </Hero>
   ),
   globals: {
@@ -268,7 +344,11 @@ export const Eyebrow: Story = {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
         felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
     </Hero>
   ),
 }
@@ -296,7 +376,11 @@ export const EyebrowCentered: Story = {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
         felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
     </Hero>
   ),
 }
diff --git a/packages/react/src/Hero/Hero.figma.tsx b/packages/react/src/Hero/Hero.figma.tsx
index fea68bcdea..b47884f0c8 100644
--- a/packages/react/src/Hero/Hero.figma.tsx
+++ b/packages/react/src/Hero/Hero.figma.tsx
@@ -23,26 +23,31 @@ figma.connect(
       heading: figma.string('heading'),
       primaryAction: figma.nestedProps('PrimaryAction', {text: figma.string('text')}),
       primaryActionOpeningTag: figma.boolean('actions?', {
-        true: '<Hero.PrimaryAction href="#">',
+        true: `<Hero.ButtonGroup>
+<Button as="a" href="#">`,
         false: undefined,
       }),
       primaryActionClosingTag: figma.boolean('actions?', {
-        true: '</Hero.PrimaryAction>',
+        true: '</Button>',
         false: undefined,
       }),
       secondaryAction: figma.nestedProps('SecondaryAction', {text: figma.string('text')}),
       secondaryActionOpeningTag: figma.nestedProps('ButtonGroup', {
         tag: figma.boolean('secondary?', {
-          true: '<Hero.SecondaryAction href="#">',
+          true: '<Button as="a" href="#">',
           false: undefined,
         }),
       }),
       secondaryActionClosingTag: figma.nestedProps('ButtonGroup', {
         tag: figma.boolean('secondary?', {
-          true: '</Hero.SecondaryAction>',
+          true: '</Button>',
           false: undefined,
         }),
       }),
+      buttonGroupClosingTag: figma.boolean('actions?', {
+        true: '</Hero.ButtonGroup>',
+        false: undefined,
+      }),
     },
     example: ({
       align,
@@ -56,6 +61,7 @@ figma.connect(
       secondaryAction,
       secondaryActionClosingTag,
       secondaryActionOpeningTag,
+      buttonGroupClosingTag,
     }) => (
       <Hero align={align as HeroProps['align']}>
         <Hero.Heading>{heading}</Hero.Heading>
@@ -68,6 +74,7 @@ figma.connect(
         {secondaryActionOpeningTag.tag}
         {secondaryAction.text}
         {secondaryActionClosingTag.tag}
+        {buttonGroupClosingTag}
       </Hero>
     ),
   },
diff --git a/packages/react/src/Hero/Hero.gridline.stories.tsx b/packages/react/src/Hero/Hero.gridline.stories.tsx
index 5b0f6d869c..b861560e19 100644
--- a/packages/react/src/Hero/Hero.gridline.stories.tsx
+++ b/packages/react/src/Hero/Hero.gridline.stories.tsx
@@ -9,6 +9,7 @@ import {Hero} from '.'
 import styles from './Hero.stories.module.css'
 import {Text} from '../Text'
 import {InlineLink} from '../InlineLink'
+import {Button} from '../Button'
 
 const meta = {
   title: 'Components/Hero/Features/GridLine variants',
@@ -31,12 +32,41 @@ export const Gridline: Story = {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
         felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
       <Hero.Image src={placeholderImage} alt="placeholder image, blank with gray solid fill" />
     </Hero>
   ),
 }
 
+export const GridlineImageWithoutPadding: Story = {
+  name: 'Gridline default variant: Image without padding',
+  render: () => (
+    <Hero variant="gridline" align="center">
+      <Hero.Label>Label</Hero.Label>
+      <Hero.Heading>This is my super sweet hero heading</Hero.Heading>
+      <Hero.Description>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
+        felis nam pulvinar risus elementum.
+      </Hero.Description>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
+      <Hero.Image
+        position="block-end"
+        padding="none"
+        src={placeholderImage}
+        alt="placeholder image, blank with gray solid fill"
+      />
+    </Hero>
+  ),
+}
+
 export const GridlineCentered: Story = {
   name: 'Gridline default variant: Centered',
   render: () => (
@@ -47,7 +77,11 @@ export const GridlineCentered: Story = {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
         felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
       <Hero.Image src={placeholderImage} alt="placeholder image, blank with gray solid fill" />
     </Hero>
   ),
@@ -63,7 +97,11 @@ export const GridlineImageInlineEnd: Story = {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
         felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
       <Hero.Image position="inline-end" src={placeholderImage} alt="placeholder image, blank with gray solid fill" />
     </Hero>
   ),
@@ -79,7 +117,11 @@ export const GridlineImageInlineStart: Story = {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
         felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
       <Hero.Image position="inline-start" src={placeholderImage} alt="placeholder image, blank with gray solid fill" />
     </Hero>
   ),
@@ -95,9 +137,14 @@ export const GridlineImageInlineEndPadded: Story = {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
         felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
       <Hero.Image
-        position="inline-end-padded"
+        position="inline-end"
+        padding="all"
         src={placeholderImage}
         alt="placeholder image, blank with gray solid fill"
       />
@@ -115,9 +162,14 @@ export const GridlineImageInlineStartPadded: Story = {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
         felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
       <Hero.Image
-        position="inline-start-padded"
+        position="inline-start"
+        padding="all"
         src={placeholderImage}
         alt="placeholder image, blank with gray solid fill"
       />
@@ -135,9 +187,14 @@ export const GridlineImageBlockEndPadded: Story = {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
         felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
       <Hero.Image
-        position="block-end-padded"
+        position="block-end"
+        padding="all"
         src={placeholderImage}
         alt="placeholder image, blank with gray solid fill"
       />
@@ -155,8 +212,48 @@ export const GridlineYoutubeVideoBlockEnd: Story = {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
         felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
+      <Hero.Video
+        poster={posterImage}
+        posterAltText="Mona the Octocat"
+        posterTitle="Introducing the GitHub Copilot coding agent "
+      >
+        <iframe
+          src="https://www.youtube.com/embed/EPyyyB23NUU?autoplay=1"
+          title="YouTube video player"
+          frameBorder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          referrerPolicy="strict-origin-when-cross-origin"
+          allowFullScreen
+          className={styles.customVideo}
+        ></iframe>
+      </Hero.Video>
+    </Hero>
+  ),
+}
+
+export const GridlineYoutubeVideoWithoutPadding: Story = {
+  name: 'Gridline default variant: YouTube video without padding',
+  render: () => (
+    <Hero variant="gridline" align="center">
+      <Hero.Label>Label</Hero.Label>
+      <Hero.Heading>This is my super sweet hero heading</Hero.Heading>
+      <Hero.Description>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
+        felis nam pulvinar risus elementum.
+      </Hero.Description>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
       <Hero.Video
+        position="block-end"
+        padding="none"
         poster={posterImage}
         posterAltText="Mona the Octocat"
         posterTitle="Introducing the GitHub Copilot coding agent "
@@ -185,7 +282,11 @@ export const GridlineYoutubeVideoInlineEnd: Story = {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
         felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
       <Hero.Video
         position="inline-end"
         poster={posterImage}
@@ -216,7 +317,11 @@ export const GridlineYoutubeVideoBlockEndWithPoster: Story = {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
         felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
       <Hero.Video
         poster={posterImage}
         posterAltText="Mona the Octocat"
@@ -246,9 +351,14 @@ export const GridlineYoutubeVideoBlockEndPadded: Story = {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
         felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
       <Hero.Video
-        position="block-end-padded"
+        position="block-end"
+        padding="all"
         poster={posterImage}
         posterAltText="Mona the Octocat"
         posterTitle="Introducing the GitHub Copilot coding agent "
@@ -277,13 +387,47 @@ export const GridlineExpressive: Story = {
         Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
         aperiam, quae inventore.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Get started for free</Hero.PrimaryAction>
-      <Hero.SecondaryAction href="#">See plans & pricing</Hero.SecondaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Get started for free
+        </Button>
+        <Button as="a" href="#">
+          See plans &amp; pricing
+        </Button>
+      </Hero.ButtonGroup>
       <Hero.Image src={placeholderImage} alt="placeholder image, blank with gray solid fill" />
     </Hero>
   ),
 }
 
+export const GridlineExpressiveImageWithoutPadding: Story = {
+  name: 'Expressive variant: Image without padding',
+  render: () => (
+    <Hero variant="gridline-expressive">
+      <Hero.Label>Eyebrow</Hero.Label>
+      <Hero.Heading>This is my super sweet hero heading</Hero.Heading>
+      <Hero.Description>
+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+        aperiam, quae inventore.
+      </Hero.Description>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Get started for free
+        </Button>
+        <Button as="a" href="#">
+          See plans &amp; pricing
+        </Button>
+      </Hero.ButtonGroup>
+      <Hero.Image
+        position="block-end"
+        padding="none"
+        src={placeholderImage}
+        alt="placeholder image, blank with gray solid fill"
+      />
+    </Hero>
+  ),
+}
+
 export const GridlineExpressiveNarrow: Story = {
   name: 'Expressive variant (narrow)',
   render: () => (
@@ -294,8 +438,14 @@ export const GridlineExpressiveNarrow: Story = {
         Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
         aperiam, quae inventore.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Get started for free</Hero.PrimaryAction>
-      <Hero.SecondaryAction href="#">See plans & pricing</Hero.SecondaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Get started for free
+        </Button>
+        <Button as="a" href="#">
+          See plans &amp; pricing
+        </Button>
+      </Hero.ButtonGroup>
       <Hero.Image src={placeholderImage} alt="placeholder image, blank with gray solid fill" />
     </Hero>
   ),
@@ -314,10 +464,17 @@ export const GridlineExpressiveBlockEndPadded: Story = {
         Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
         aperiam, quae inventore.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Get started for free</Hero.PrimaryAction>
-      <Hero.SecondaryAction href="#">See plans & pricing</Hero.SecondaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Get started for free
+        </Button>
+        <Button as="a" href="#">
+          See plans &amp; pricing
+        </Button>
+      </Hero.ButtonGroup>
       <Hero.Image
-        position="block-end-padded"
+        position="block-end"
+        padding="all"
         src={placeholderImage}
         alt="placeholder image, blank with gray solid fill"
       />
@@ -339,10 +496,17 @@ export const GridlineExpressiveBlockEndPaddedTrailingComponent: Story = {
       <Hero.Label>Eyebrow</Hero.Label>
       <Hero.Heading>This is my super sweet hero heading</Hero.Heading>
 
-      <Hero.PrimaryAction href="#">Get started for free</Hero.PrimaryAction>
-      <Hero.SecondaryAction href="#">See plans & pricing</Hero.SecondaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Get started for free
+        </Button>
+        <Button as="a" href="#">
+          See plans &amp; pricing
+        </Button>
+      </Hero.ButtonGroup>
       <Hero.Image
-        position="block-end-padded"
+        position="block-end"
+        padding="all"
         src={placeholderImage}
         alt="placeholder image, blank with gray solid fill"
       />
@@ -361,8 +525,14 @@ export const GridlineExpressiveIgnoresCenterAlign: Story = {
         Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
         aperiam, quae inventore.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Get started for free</Hero.PrimaryAction>
-      <Hero.SecondaryAction href="#">See plans & pricing</Hero.SecondaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Get started for free
+        </Button>
+        <Button as="a" href="#">
+          See plans &amp; pricing
+        </Button>
+      </Hero.ButtonGroup>
       <Hero.Image src={placeholderImage} alt="placeholder image, blank with gray solid fill" />
     </Hero>
   ),
diff --git a/packages/react/src/Hero/Hero.images-videos.stories.tsx b/packages/react/src/Hero/Hero.images-videos.stories.tsx
index ae2989f375..e14b73e69a 100644
--- a/packages/react/src/Hero/Hero.images-videos.stories.tsx
+++ b/packages/react/src/Hero/Hero.images-videos.stories.tsx
@@ -5,6 +5,7 @@ import placeholderImage from '../fixtures/images/placeholder.png'
 import posterImage from '../fixtures/images/example-poster.png'
 
 import {Hero} from '.'
+import {Button} from '../Button'
 import {Grid} from '../Grid'
 import {VideoPlayer} from '../VideoPlayer'
 
@@ -33,7 +34,11 @@ export const WithImageBlockEndDefault: Story = {
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
             turpis felis nam pulvinar risus elementum.
           </Hero.Description>
-          <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+          <Hero.ButtonGroup>
+            <Button as="a" href="#">
+              Primary action
+            </Button>
+          </Hero.ButtonGroup>
           <Hero.Image src={placeholderImage} alt="placeholder image, blank with gray solid fill" />
         </Hero>
       </Grid.Column>
@@ -77,7 +82,11 @@ export const WithImageBlockEndCenter: Story = {
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
             turpis felis nam pulvinar risus elementum.
           </Hero.Description>
-          <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+          <Hero.ButtonGroup>
+            <Button as="a" href="#">
+              Primary action
+            </Button>
+          </Hero.ButtonGroup>
           <Hero.Image src={placeholderImage} alt="placeholder image, blank with gray solid fill" />
         </Hero>
       </Grid.Column>
@@ -97,7 +106,11 @@ export const WithImageInlineEnd: Story = {
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
             turpis felis nam pulvinar risus elementum.
           </Hero.Description>
-          <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+          <Hero.ButtonGroup>
+            <Button as="a" href="#">
+              Primary action
+            </Button>
+          </Hero.ButtonGroup>
           <Hero.Image
             position="inline-end"
             src={placeholderImage}
@@ -121,7 +134,11 @@ export const WithVideoBlockEndDefault: Story = {
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
             turpis felis nam pulvinar risus elementum.
           </Hero.Description>
-          <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+          <Hero.ButtonGroup>
+            <Button as="a" href="#">
+              Primary action
+            </Button>
+          </Hero.ButtonGroup>
           <Hero.Video>
             <VideoPlayer title="GitHub media player" poster={posterImage}>
               <VideoPlayer.Source src="./example.mp4" type="video/mp4" />
@@ -146,7 +163,11 @@ export const WithNativeBlockEndDefault: Story = {
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
             turpis felis nam pulvinar risus elementum.
           </Hero.Description>
-          <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+          <Hero.ButtonGroup>
+            <Button as="a" href="#">
+              Primary action
+            </Button>
+          </Hero.ButtonGroup>
           <Hero.Video>
             <video title="Example title" controls poster={posterImage} className={styles.customVideo}>
               <source src="./example.mp4" type="video/mp4" />
@@ -172,7 +193,11 @@ export const WithYoutubeVideoBlockEndDefault: Story = {
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
             turpis felis nam pulvinar risus elementum.
           </Hero.Description>
-          <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+          <Hero.ButtonGroup>
+            <Button as="a" href="#">
+              Primary action
+            </Button>
+          </Hero.ButtonGroup>
           <Hero.Video>
             <iframe
               src="https://www.youtube.com/embed/EPyyyB23NUU"
@@ -201,7 +226,11 @@ export const WithVideoInlineEnd: Story = {
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
             turpis felis nam pulvinar risus elementum.
           </Hero.Description>
-          <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+          <Hero.ButtonGroup>
+            <Button as="a" href="#">
+              Primary action
+            </Button>
+          </Hero.ButtonGroup>
           <Hero.Video position="inline-end">
             <VideoPlayer title="GitHub media player" poster={posterImage}>
               <VideoPlayer.Source src="./example.mp4" type="video/mp4" />
@@ -225,7 +254,11 @@ export const WithYoutubeVideoInlineEnd: Story = {
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
             turpis felis nam pulvinar risus elementum.
           </Hero.Description>
-          <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+          <Hero.ButtonGroup>
+            <Button as="a" href="#">
+              Primary action
+            </Button>
+          </Hero.ButtonGroup>
           <Hero.Video position="inline-end">
             <iframe
               src="https://www.youtube.com/embed/EPyyyB23NUU"
diff --git a/packages/react/src/Hero/Hero.module.css b/packages/react/src/Hero/Hero.module.css
index 139bd7d791..d396be1bea 100644
--- a/packages/react/src/Hero/Hero.module.css
+++ b/packages/react/src/Hero/Hero.module.css
@@ -83,7 +83,7 @@
   padding: var(--base-size-32) var(--base-size-32) 0;
 }
 
-.Hero-imageContainer--inline-bg-padded {
+.Hero-imageContainer--inline-padding-all {
   padding: var(--base-size-32);
   background-color: var(--brand-color-canvas-subtle);
 }
@@ -101,11 +101,14 @@
 }
 
 .Hero-imageContainer--inline-bordered {
-  background-color: var(--brand-color-canvas-subtle);
   display: flex;
   align-items: stretch;
 }
 
+.Hero-imageContainer--inline-bordered:not(.Hero-imageContainer--inline-padding-none) {
+  background-color: var(--brand-color-canvas-subtle);
+}
+
 @media screen and (min-width: 63.25rem) {
   .Hero-imageContainer--inline-bordered {
     min-height: calc(600px - var(--base-size-24));
@@ -115,7 +118,7 @@
     padding: var(--base-size-64) var(--base-size-64) 0;
   }
 
-  .Hero-imageContainer--inline-bg-padded {
+  .Hero-imageContainer--inline-padding-all {
     padding: var(--base-size-64);
   }
 }
@@ -133,10 +136,14 @@
   overflow: hidden;
 }
 
-.Hero--variant-gridline .Hero-media--pos-block-end {
+.Hero--variant-gridline .Hero-media--pos-block-end:not(.Hero-media--padding-all):not(.Hero-media--padding-none) {
   border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;
 }
 
+.Hero-media--pos-block-end.Hero-media--padding-all {
+  border-radius: var(--brand-borderRadius-medium);
+}
+
 /* Applied directly to video/iframe elements for block-end position */
 .Hero-media-item--block-end {
   border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;
@@ -144,10 +151,13 @@
 
 .Hero--variant-gridline .Hero-imageWrapper {
   border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
-  background-color: var(--brand-color-canvas-subtle);
   width: 100%;
 }
 
+.Hero--variant-gridline .Hero-imageWrapper:not(.Hero-imageWrapper--padding-none) {
+  background-color: var(--brand-color-canvas-subtle);
+}
+
 .Hero--variant-gridline .Hero-imageWrapper-inner {
   width: 100%;
   max-width: 1280px;
@@ -161,24 +171,24 @@
   }
 }
 
-.Hero--variant-gridline .Hero-imageWrapper-inner--padded {
+.Hero--variant-gridline .Hero-imageWrapper-inner--padding-all {
   padding: var(--base-size-32);
 }
 
-.Hero-media--pos-block-end-padded {
-  border-radius: var(--brand-borderRadius-medium);
-}
-
 @media screen and (min-width: 63.25rem) {
   .Hero--variant-gridline .Hero-imageWrapper-inner {
     padding: var(--base-size-64) var(--base-size-64) 0;
   }
 
-  .Hero--variant-gridline .Hero-imageWrapper-inner--padded {
+  .Hero--variant-gridline .Hero-imageWrapper-inner--padding-all {
     padding: var(--base-size-64);
   }
 }
 
+.Hero--variant-gridline .Hero-imageWrapper-inner--padding-none {
+  padding: 0;
+}
+
 /* GridLine variant with inline (side-by-side) layout */
 .Hero-grid--bordered-inline {
   width: 100%;
@@ -219,7 +229,7 @@
 /* Media styling for gridline inline positions */
 
 /* Edge-to-edge inline media (no padding) - remove border radius */
-.Hero--variant-gridline .Hero-media--pos-inline:not(.Hero-media--pos-inline-padded) {
+.Hero--variant-gridline .Hero-media--pos-inline:not(.Hero-media--padding-all) {
   border-radius: 0;
 }
 
@@ -229,7 +239,7 @@
 }
 
 /* Padded inline media - constrain size and center */
-.Hero--variant-gridline .Hero-media--pos-inline-padded {
+.Hero--variant-gridline .Hero-media--pos-inline.Hero-media--padding-all {
   max-width: 100%;
   height: auto;
   align-self: center;
@@ -292,6 +302,10 @@
   gap: var(--base-size-8) var(--base-size-16);
 }
 
+.Hero .Hero-actions > * {
+  flex-grow: 0;
+}
+
 .Hero--variant-gridline-expressive .Hero-actions {
   align-items: stretch;
   gap: var(--base-size-8) var(--base-size-12);
@@ -440,10 +454,13 @@
 /* Media wrapper styles for gridline-expressive (same as gridline) */
 .Hero--variant-gridline-expressive .Hero-imageWrapper {
   border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
-  background-color: var(--brand-color-canvas-subtle);
   width: 100%;
 }
 
+.Hero--variant-gridline-expressive .Hero-imageWrapper:not(.Hero-imageWrapper--padding-none) {
+  background-color: var(--brand-color-canvas-subtle);
+}
+
 .Hero--variant-gridline-expressive .Hero-imageWrapper-inner {
   width: 100%;
   max-width: 1280px;
@@ -457,7 +474,7 @@
   }
 }
 
-.Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {
+.Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padding-all {
   padding: var(--base-size-32);
 }
 
@@ -466,11 +483,15 @@
     padding: var(--base-size-64) var(--base-size-64) 0;
   }
 
-  .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {
+  .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padding-all {
     padding: var(--base-size-64);
   }
 }
 
+.Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padding-none {
+  padding: 0;
+}
+
 /* Shared media styles for gridline-expressive */
 .Hero--variant-gridline-expressive .Hero-media {
   max-width: 1176px;
@@ -479,7 +500,13 @@
   overflow: hidden;
 }
 
-.Hero--variant-gridline-expressive .Hero-media--pos-block-end,
-.Hero--variant-gridline-expressive .Hero-image:not(.Hero-media--pos-block-end-padded) {
+.Hero--variant-gridline-expressive
+  .Hero-media--pos-block-end:not(.Hero-media--padding-all):not(.Hero-media--padding-none) {
   border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;
 }
+
+.Hero--variant-gridline .Hero-media--padding-none,
+.Hero--variant-gridline-expressive .Hero-media--padding-none {
+  border-radius: 0;
+  max-width: 100%;
+}
diff --git a/packages/react/src/Hero/Hero.module.css.d.ts b/packages/react/src/Hero/Hero.module.css.d.ts
index c3a2035633..5fff3d3c6e 100644
--- a/packages/react/src/Hero/Hero.module.css.d.ts
+++ b/packages/react/src/Hero/Hero.module.css.d.ts
@@ -24,19 +24,22 @@ declare const styles: {
   readonly "Hero-heading--fullWidth": string;
   readonly "Hero-image": string;
   readonly "Hero-imageContainer--bg-subtle": string;
-  readonly "Hero-imageContainer--inline-bg-padded": string;
   readonly "Hero-imageContainer--inline-bordered": string;
+  readonly "Hero-imageContainer--inline-padding-all": string;
+  readonly "Hero-imageContainer--inline-padding-none": string;
   readonly "Hero-imageWrapper": string;
   readonly "Hero-imageWrapper--bg-subtle": string;
+  readonly "Hero-imageWrapper--padding-none": string;
   readonly "Hero-imageWrapper-inner": string;
-  readonly "Hero-imageWrapper-inner--padded": string;
+  readonly "Hero-imageWrapper-inner--padding-all": string;
+  readonly "Hero-imageWrapper-inner--padding-none": string;
   readonly "Hero-imageWrapper-inner--with-gridline": string;
   readonly "Hero-label": string;
   readonly "Hero-media": string;
+  readonly "Hero-media--padding-all": string;
+  readonly "Hero-media--padding-none": string;
   readonly "Hero-media--pos-block-end": string;
-  readonly "Hero-media--pos-block-end-padded": string;
   readonly "Hero-media--pos-inline": string;
-  readonly "Hero-media--pos-inline-padded": string;
   readonly "Hero-media-item": string;
   readonly "Hero-media-item--block-end": string;
   readonly "Hero-media-item--inline": string;
diff --git a/packages/react/src/Hero/Hero.stories.module.css b/packages/react/src/Hero/Hero.stories.module.css
index 02c4930f69..f4d4246aff 100644
--- a/packages/react/src/Hero/Hero.stories.module.css
+++ b/packages/react/src/Hero/Hero.stories.module.css
@@ -4,21 +4,6 @@
   aspect-ratio: 16 / 9;
 }
 
-/**
-* Examples
-* TODO: Replace with functional token when final color is confirmed
-*/
-
-.heroWithCardsExample {
-  --customCardsBackgroundColor: transparent;
-}
-[data-color-mode='light'] .heroWithCardsExample {
-  --customCardsBackgroundColor: var(--base-color-scale-gray-1);
-}
-[data-color-mode='dark'] .heroWithCardsExample {
-  --customCardsBackgroundColor: var(--base-color-scale-gray-9);
-}
-
 /* Custom input with ActionMenu and code copying */
 
 .customInputExample {
diff --git a/packages/react/src/Hero/Hero.stories.module.css.d.ts b/packages/react/src/Hero/Hero.stories.module.css.d.ts
index df09ca1e13..dff5f4dc4a 100644
--- a/packages/react/src/Hero/Hero.stories.module.css.d.ts
+++ b/packages/react/src/Hero/Hero.stories.module.css.d.ts
@@ -7,7 +7,6 @@ declare const styles: {
   readonly "customVideo": string;
   readonly "d-lg-none": string;
   readonly "d-none-d-lg-block": string;
-  readonly "heroWithCardsExample": string;
 };
 export = styles;
 
diff --git a/packages/react/src/Hero/Hero.stories.tsx b/packages/react/src/Hero/Hero.stories.tsx
index 7514c2a53c..c047d60266 100644
--- a/packages/react/src/Hero/Hero.stories.tsx
+++ b/packages/react/src/Hero/Hero.stories.tsx
@@ -3,6 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {INITIAL_VIEWPORTS} from 'storybook/viewport'
 
 import {Hero} from '.'
+import {Button} from '../Button'
 
 const meta = {
   title: 'Components/Hero',
@@ -27,7 +28,11 @@ export const Default: Story = {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
         felis nam pulvinar risus elementum.
       </Hero.Description>
-      <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+      <Hero.ButtonGroup>
+        <Button as="a" href="#">
+          Primary action
+        </Button>
+      </Hero.ButtonGroup>
     </Hero>
   ),
 }
diff --git a/packages/react/src/Hero/Hero.test.tsx b/packages/react/src/Hero/Hero.test.tsx
index f50adaff5a..258a8751db 100644
--- a/packages/react/src/Hero/Hero.test.tsx
+++ b/packages/react/src/Hero/Hero.test.tsx
@@ -1,9 +1,12 @@
-import React, {render, cleanup} from '@testing-library/react'
+import React from 'react'
+import {render, cleanup} from '@testing-library/react'
 import '@testing-library/jest-dom'
 
 import {Hero} from './Hero'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import {VideoPlayer} from '../VideoPlayer'
+import {Button} from '../Button'
+import {ActionMenu} from '../ActionMenu'
 
 expect.extend(toHaveNoViolations)
 
@@ -31,7 +34,7 @@ describe('Hero', () => {
 
   afterEach(cleanup)
 
-  test('renders correctly into the document', () => {
+  it('renders correctly into the document', () => {
     const {getByText} = render(
       <Hero>
         <Hero.Heading>{mockHeading}</Hero.Heading>
@@ -51,7 +54,7 @@ describe('Hero', () => {
     expect(secondaryActionElement).toBeInTheDocument()
   })
 
-  test('renders without secondary action', () => {
+  it('renders without secondary action', () => {
     const {queryAllByRole} = render(
       <Hero>
         <Hero.Heading>{mockHeading}</Hero.Heading>
@@ -64,7 +67,29 @@ describe('Hero', () => {
     expect(linkElements.length).toBe(1)
   })
 
-  test('renders without description', () => {
+  it('renders a ButtonGroup with Button and ActionMenu children in the expressive layout', () => {
+    const {getByRole, getByTestId} = render(
+      <Hero variant="gridline-expressive">
+        <Hero.Heading>{mockHeading}</Hero.Heading>
+        <Hero.Description>{mockDescription}</Hero.Description>
+        <Hero.ButtonGroup data-testid="hero-button-group">
+          <Button>Primary Action</Button>
+          <ActionMenu>
+            <ActionMenu.Button>More actions</ActionMenu.Button>
+            <ActionMenu.Overlay aria-label="More actions">
+              <ActionMenu.Item value="Contact sales">Contact sales</ActionMenu.Item>
+            </ActionMenu.Overlay>
+          </ActionMenu>
+        </Hero.ButtonGroup>
+      </Hero>,
+    )
+
+    expect(getByTestId('hero-button-group')).toHaveClass('Hero-actions')
+    expect(getByRole('button', {name: 'Primary Action'})).toBeInTheDocument()
+    expect(getByRole('button', {name: 'More actions'})).toBeInTheDocument()
+  })
+
+  it('renders without description', () => {
     const {container} = render(
       <Hero>
         <Hero.Heading>{mockHeading}</Hero.Heading>
@@ -77,7 +102,7 @@ describe('Hero', () => {
     expect(descriptionEl).toBeNull()
   })
 
-  test('renders without description', () => {
+  it('renders without description', () => {
     const mockLabel = 'Label'
 
     const {getByText} = render(
@@ -93,7 +118,7 @@ describe('Hero', () => {
     expect(labelEl).toBeInTheDocument()
   })
 
-  test('renders with an optional image in block end alignment by default', () => {
+  it('renders with an optional image in block end alignment by default', () => {
     const mockAltText = 'placeholder image, blank with gray solid fill'
 
     const {getByAltText} = render(
@@ -108,7 +133,7 @@ describe('Hero', () => {
     expect(imageEl).toHaveClass('Hero-media--pos-block-end')
   })
 
-  test('applies Hero layout classes to the picture element when as="picture"', () => {
+  it('applies Hero layout classes to the picture element when as="picture"', () => {
     const mockAltText = 'placeholder image, blank with gray solid fill'
 
     const {container} = render(
@@ -130,7 +155,7 @@ describe('Hero', () => {
     expect(pictureEl).toHaveClass('Hero-media--pos-block-end')
   })
 
-  test('it has a slot for videos', () => {
+  it('it has a slot for videos', () => {
     const mockTestId = 'hero-video'
     const {getByTestId} = render(
       <Hero>
@@ -144,7 +169,7 @@ describe('Hero', () => {
     expect(videoElSlot.tagName).toBe('DIV')
   })
 
-  test('it can render a native video in block-end alignment by default', () => {
+  it('it can render a native video in block-end alignment by default', () => {
     const mockTestId = 'hero-video'
     const mockTitle = 'Mock title'
     const {getByTitle, getByRole} = render(
@@ -167,7 +192,7 @@ describe('Hero', () => {
     expect(videoEl).toBeInTheDocument()
   })
 
-  test('it can render custom VideoPlayer in block-end alignment by default', () => {
+  it('it can render custom VideoPlayer in block-end alignment by default', () => {
     const mockTestId = 'hero-video'
     const mockTitle = 'Mock title'
     const {getByTitle, getByRole} = render(
@@ -189,7 +214,7 @@ describe('Hero', () => {
     expect(videoEl).toBeInTheDocument()
   })
 
-  test('it can render a Youtube video in block-end alignment by default', () => {
+  it('it can render a Youtube video in block-end alignment by default', () => {
     const mockTestId = 'hero-video'
     const mockTitle = 'Mock title'
     const {getByTitle, getByRole} = render(
@@ -214,7 +239,7 @@ describe('Hero', () => {
     expect(videoEl).toBeInTheDocument()
   })
 
-  test('it can optionally render an image in inline end alignment', () => {
+  it('it can optionally render an image in inline end alignment', () => {
     const mockAltText = 'placeholder image, blank with gray solid fill'
 
     const {getByAltText} = render(
@@ -229,7 +254,7 @@ describe('Hero', () => {
     expect(imageEl).toHaveClass('Hero-media--pos-inline-end')
   })
 
-  test('it can optionally render a video in inline-end alignment', () => {
+  it('it can optionally render a video in inline-end alignment', () => {
     const mockTestId = 'hero-video'
     const mockTitle = 'Mock title'
     const {getByTitle, getByRole} = render(
@@ -252,7 +277,7 @@ describe('Hero', () => {
     expect(videoEl).toBeInTheDocument()
   })
 
-  test('renders with a label', () => {
+  it('renders with a label', () => {
     const mockLabel = 'Label'
 
     const {getByText} = render(
@@ -286,7 +311,7 @@ describe('Hero', () => {
     expect(elTrailing).toBeInTheDocument()
   })
 
-  test('no a11y violations', async () => {
+  it('no a11y violations', async () => {
     const {container} = render(
       <Hero>
         <Hero.Heading>{mockHeading}</Hero.Heading>
@@ -300,7 +325,7 @@ describe('Hero', () => {
     expect(results).toHaveNoViolations()
   })
 
-  test('it prevents rendering multiple media types, preferring images by default', () => {
+  it('it prevents rendering multiple media types, preferring images by default', () => {
     const mockAltText = 'placeholder image, blank with gray solid fill'
     const mockVideoTestId = 'hero-video'
     const mockVideoTitle = 'Mock video title'
@@ -329,7 +354,7 @@ describe('Hero', () => {
     expect(videoEl).not.toBeInTheDocument()
   })
 
-  test('renders with default variant by default', () => {
+  it('renders with default variant by default', () => {
     const mockAltText = 'placeholder image'
 
     const {getByAltText} = render(
@@ -343,7 +368,7 @@ describe('Hero', () => {
     expect(imageEl).not.toHaveClass('Hero-image--contained')
   })
 
-  test('renders with a gridline variant', () => {
+  it('renders with a gridline variant', () => {
     const mockAltText = 'placeholder image'
 
     const {getByAltText, getByRole, getByTestId} = render(
@@ -363,10 +388,129 @@ describe('Hero', () => {
     expect(imageWrapper).toBeInTheDocument()
   })
 
-  test('renders the gridline layout with optional inline layout. Defaults to end.', () => {
+  it('removes gridline media padding when requested by the image', () => {
+    const {container, getByAltText} = render(
+      <Hero variant="gridline">
+        <Hero.Heading>{mockHeading}</Hero.Heading>
+        <Hero.Image padding="none" src="mock.png" alt="placeholder image" />
+      </Hero>,
+    )
+
+    expect(container.querySelector('.Hero-imageWrapper')).toHaveClass('Hero-imageWrapper--padding-none')
+    expect(container.querySelector('.Hero-imageWrapper-inner')).toHaveClass('Hero-imageWrapper-inner--padding-none')
+    expect(getByAltText('placeholder image')).toHaveClass('Hero-media--padding-none')
+  })
+
+  it('does not apply an explicit background when gridline media is full bleed', () => {
+    const {container} = render(
+      <Hero variant="gridline" imageBackgroundColor="subtle">
+        <Hero.Heading>{mockHeading}</Hero.Heading>
+        <Hero.Image padding="none" src="mock.png" alt="placeholder image" />
+      </Hero>,
+    )
+
+    expect(container.querySelector('.Hero-imageWrapper')).not.toHaveClass('Hero-imageWrapper--bg-subtle')
+  })
+
+  it('preserves the default gridline media padding', () => {
+    const {container} = render(
+      <Hero variant="gridline">
+        <Hero.Heading>{mockHeading}</Hero.Heading>
+        <Hero.Image padding="default" src="mock.png" alt="placeholder image" />
+      </Hero>,
+    )
+
+    const mediaWrapper = container.querySelector('.Hero-imageWrapper-inner')
+    expect(mediaWrapper).not.toHaveClass('Hero-imageWrapper-inner--padding-none')
+    expect(mediaWrapper).not.toHaveClass('Hero-imageWrapper-inner--padding-all')
+  })
+
+  it('removes expressive gridline media padding when requested by the video', () => {
+    const {container, getByTitle} = render(
+      <Hero variant="gridline-expressive">
+        <Hero.Heading>{mockHeading}</Hero.Heading>
+        <Hero.Video padding="none">
+          <iframe title="Example video" />
+        </Hero.Video>
+      </Hero>,
+    )
+
+    expect(container.querySelector('.Hero-imageWrapper')).toHaveClass('Hero-imageWrapper--padding-none')
+    expect(container.querySelector('.Hero-imageWrapper-inner')).toHaveClass('Hero-imageWrapper-inner--padding-none')
+    expect(getByTitle('Example video').parentElement).toHaveClass('Hero-media--padding-none')
+    expect(getByTitle('Example video').parentElement).not.toHaveAttribute('padding')
+  })
+
+  it('does not forward media padding in the default Hero variant', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+    const {container, getByAltText} = render(
+      <Hero>
+        <Hero.Heading>{mockHeading}</Hero.Heading>
+        <Hero.Image padding="none" src="mock.png" alt="placeholder image" />
+      </Hero>,
+    )
+
+    expect(container.querySelector('.Hero-imageWrapper-inner')).not.toBeInTheDocument()
+    expect(getByAltText('placeholder image')).not.toHaveAttribute('padding')
+    expect(warnSpy).toHaveBeenCalledWith(
+      'Hero: media padding is only supported by the "gridline" and "gridline-expressive" variants; ignoring padding="none".',
+    )
+
+    warnSpy.mockRestore()
+  })
+
+  it('warns when padding="all" is used in the default Hero variant', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+    render(
+      <Hero>
+        <Hero.Heading>{mockHeading}</Hero.Heading>
+        <Hero.Video padding="all">
+          <iframe title="Example video" />
+        </Hero.Video>
+      </Hero>,
+    )
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      'Hero: media padding is only supported by the "gridline" and "gridline-expressive" variants; ignoring padding="all".',
+    )
+
+    warnSpy.mockRestore()
+  })
+
+  it('does not warn for supported media padding combinations', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+    const {rerender} = render(
+      <Hero>
+        <Hero.Heading>{mockHeading}</Hero.Heading>
+        <Hero.Image padding="default" src="mock.png" alt="placeholder image" />
+      </Hero>,
+    )
+
+    rerender(
+      <Hero variant="gridline">
+        <Hero.Heading>{mockHeading}</Hero.Heading>
+        <Hero.Image padding="none" src="mock.png" alt="placeholder image" />
+      </Hero>,
+    )
+
+    rerender(
+      <Hero variant="gridline-expressive">
+        <Hero.Heading>{mockHeading}</Hero.Heading>
+        <Hero.Video padding="all">
+          <iframe title="Example video" />
+        </Hero.Video>
+      </Hero>,
+    )
+
+    expect(warnSpy).not.toHaveBeenCalled()
+
+    warnSpy.mockRestore()
+  })
+
+  it('renders the gridline layout with optional inline layout. Defaults to end.', () => {
     const mockAltText = 'placeholder image'
 
-    const {getByAltText, getByRole, getByTestId} = render(
+    const {container, getByAltText, getByRole, getByTestId} = render(
       <Hero variant="gridline">
         <Hero.Heading>{mockHeading}</Hero.Heading>
         <Hero.Image position="inline-end" src="mock.png" alt={mockAltText} />
@@ -382,9 +526,10 @@ describe('Hero', () => {
 
     const gridEl = getByTestId('Hero-grid')
     expect(gridEl).toHaveClass('Hero-grid--bordered-inline')
+    expect(container.querySelector('.Hero-imageContainer--inline-padding-all')).not.toBeInTheDocument()
   })
 
-  test('renders the gridline layout with optional inline start layout. ', () => {
+  it('renders the gridline layout with optional inline start layout. ', () => {
     const mockAltText = 'placeholder image'
 
     const {getByAltText, getByRole, getByTestId} = render(
@@ -406,7 +551,7 @@ describe('Hero', () => {
     expect(gridEl).toHaveClass('Hero-grid--bordered-inline')
   })
 
-  test('renders with gridline-expressive variant', () => {
+  it('renders with gridline-expressive variant', () => {
     const {getByRole, getByTestId} = render(
       <Hero variant="gridline-expressive">
         <Hero.Heading>{mockHeading}</Hero.Heading>
@@ -421,7 +566,7 @@ describe('Hero', () => {
     expect(gridEl).toHaveClass('Hero-grid--expressive')
   })
 
-  test('ignores align="center" for the gridline-expressive variant and warns in development', () => {
+  it('ignores align="center" for the gridline-expressive variant and warns in development', () => {
     const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
     const {getByRole} = render(
       <Hero variant="gridline-expressive" align="center">
@@ -438,7 +583,7 @@ describe('Hero', () => {
     warnSpy.mockRestore()
   })
 
-  test('renders with center alignment', () => {
+  it('renders with center alignment', () => {
     const {getByRole} = render(
       <Hero align="center">
         <Hero.Heading>{mockHeading}</Hero.Heading>
@@ -449,7 +594,7 @@ describe('Hero', () => {
     expect(rootEl).toHaveClass('Hero--align-center')
   })
 
-  test('renders with start alignment by default', () => {
+  it('renders with start alignment by default', () => {
     const {getByRole} = render(
       <Hero>
         <Hero.Heading>{mockHeading}</Hero.Heading>
@@ -460,7 +605,7 @@ describe('Hero', () => {
     expect(rootEl).toHaveClass('Hero--align-start')
   })
 
-  test('renders Hero.Eyebrow correctly', () => {
+  it('renders Hero.Eyebrow correctly', () => {
     const mockEyebrow = 'Eyebrow text'
 
     const {getByText} = render(
@@ -474,52 +619,67 @@ describe('Hero', () => {
     expect(eyebrowEl).toBeInTheDocument()
   })
 
-  test('renders with block-end-padded position', () => {
+  it('renders block-end media with padding on all sides', () => {
     const mockAltText = 'placeholder image'
 
-    const {getByRole, getByTestId} = render(
+    const {container, getByRole} = render(
       <Hero variant="gridline">
         <Hero.Heading>{mockHeading}</Hero.Heading>
-        <Hero.Image position="block-end-padded" src="mock.png" alt={mockAltText} />
+        <Hero.Image position="block-end" padding="all" src="mock.png" alt={mockAltText} />
       </Hero>,
     )
 
     const rootEl = getByRole('region')
-    expect(rootEl).toHaveClass('Hero--image-pos-block-end-padded')
-
-    const imageWrapper = getByTestId('Hero-imageWrapper')
-    expect(imageWrapper).toHaveClass('Hero-imageWrapper--block-end-padded')
+    expect(rootEl).toHaveClass('Hero--image-pos-block-end')
+    expect(container.querySelector('.Hero-imageWrapper-inner')).toHaveClass('Hero-imageWrapper-inner--padding-all')
   })
 
-  test('renders with inline-end-padded position', () => {
+  it('renders inline-end media with padding on all sides', () => {
     const mockAltText = 'placeholder image'
 
-    const {getByRole} = render(
+    const {container, getByAltText, getByRole} = render(
       <Hero variant="gridline">
         <Hero.Heading>{mockHeading}</Hero.Heading>
-        <Hero.Image position="inline-end-padded" src="mock.png" alt={mockAltText} />
+        <Hero.Image position="inline-end" padding="all" src="mock.png" alt={mockAltText} />
       </Hero>,
     )
 
     const rootEl = getByRole('region')
-    expect(rootEl).toHaveClass('Hero--image-pos-inline-end-padded')
+    expect(rootEl).toHaveClass('Hero--image-pos-inline-end')
+    expect(container.querySelector('.Hero-imageContainer--inline-padding-all')).toBeInTheDocument()
+    expect(getByAltText(mockAltText)).toHaveClass('Hero-media--padding-all')
+  })
+
+  it('removes the inline media container background when padding is none', () => {
+    const {container} = render(
+      <Hero variant="gridline">
+        <Hero.Heading>{mockHeading}</Hero.Heading>
+        <Hero.Image position="inline-end" padding="none" src="mock.png" alt="placeholder image" />
+      </Hero>,
+    )
+
+    expect(container.querySelector('.Hero-imageContainer--inline-bordered')).toHaveClass(
+      'Hero-imageContainer--inline-padding-none',
+    )
   })
 
-  test('renders with inline-start-padded position', () => {
+  it('renders inline-start media with padding on all sides', () => {
     const mockAltText = 'placeholder image'
 
-    const {getByRole} = render(
+    const {container, getByAltText, getByRole} = render(
       <Hero variant="gridline">
         <Hero.Heading>{mockHeading}</Hero.Heading>
-        <Hero.Image position="inline-start-padded" src="mock.png" alt={mockAltText} />
+        <Hero.Image position="inline-start" padding="all" src="mock.png" alt={mockAltText} />
       </Hero>,
     )
 
     const rootEl = getByRole('region')
-    expect(rootEl).toHaveClass('Hero--image-pos-inline-start-padded')
+    expect(rootEl).toHaveClass('Hero--image-pos-inline-start')
+    expect(container.querySelector('.Hero-imageContainer--inline-padding-all')).toBeInTheDocument()
+    expect(getByAltText(mockAltText)).toHaveClass('Hero-media--padding-all')
   })
 
-  test('renders with default imageBackgroundColor', () => {
+  it('renders with default imageBackgroundColor', () => {
     const mockAltText = 'placeholder image'
 
     const {container} = render(
@@ -533,7 +693,7 @@ describe('Hero', () => {
     expect(imageWrapper).toBeInTheDocument()
   })
 
-  test('renders with subtle imageBackgroundColor', () => {
+  it('renders with subtle imageBackgroundColor', () => {
     const mockAltText = 'placeholder image'
 
     const {container} = render(
@@ -547,7 +707,7 @@ describe('Hero', () => {
     expect(imageWrapper).toBeInTheDocument()
   })
 
-  test('renders with duotone styles when <b> tag is used inside the Hero.Heading', () => {
+  it('renders with duotone styles when <b> tag is used inside the Hero.Heading', () => {
     const {getByText} = render(
       <Hero>
         <Hero.Heading>
diff --git a/packages/react/src/Hero/Hero.tsx b/packages/react/src/Hero/Hero.tsx
index a5d5ac5631..860901637b 100644
--- a/packages/react/src/Hero/Hero.tsx
+++ b/packages/react/src/Hero/Hero.tsx
@@ -6,12 +6,13 @@ import {Box} from '../Box'
 import type {BaseProps} from '../component-helpers'
 import {AnimationProvider} from '../animation'
 
-import {HeroContext, heroMediaInlinePositions} from './HeroContext'
-import type {HeroMediaInlinePositions, HeroAlign, HeroVariant} from './HeroContext'
+import {HeroContext, HeroMediaInlinePositionOptions} from './HeroContext'
+import type {HeroMediaInlinePosition, HeroAlign, HeroVariant} from './HeroContext'
 import {
   HeroLabel,
   HeroHeading,
   HeroDescription,
+  HeroButtonGroup,
   HeroImage,
   HeroVideo,
   HeroEyebrow,
@@ -77,52 +78,63 @@ const Root = forwardRef<HTMLElement, PropsWithChildren<HeroProps>>(
     },
     ref,
   ) => {
-    const {HeroActions, HeroChildren, HeroImageChild, HeroVideoChild, HeroHeaderChildren, HeroDescriptionChild} =
-      useMemo(() => {
-        const result = React.Children.toArray(children).reduce<{
-          HeroActions: React.ReactElement[]
-          HeroImageChild?: React.ReactElement<HeroImageProps>
-          HeroVideoChild?: React.ReactElement<HeroVideoProps>
-          HeroChildren: React.ReactElement[]
-          HeroHeaderChildren: React.ReactElement[]
-          HeroDescriptionChild?: React.ReactElement
-        }>(
-          (acc, child) => {
-            if (React.isValidElement(child)) {
-              if (child.type === HeroPrimaryAction || child.type === HeroSecondaryAction) {
-                acc.HeroActions.push(child)
-              } else if (child.type === HeroImage) {
-                acc.HeroImageChild = child as React.ReactElement<HeroImageProps>
-              } else if (child.type === HeroVideo) {
-                acc.HeroVideoChild = child as React.ReactElement<HeroVideoProps>
-              } else {
-                acc.HeroChildren.push(child)
-                if (child.type === HeroLabel || child.type === HeroEyebrow || child.type === HeroHeading) {
-                  acc.HeroHeaderChildren.push(child)
-                } else if (child.type === HeroDescription) {
-                  acc.HeroDescriptionChild = child
-                }
+    const {
+      HeroActions,
+      HeroButtonGroupChild,
+      HeroChildren,
+      HeroImageChild,
+      HeroVideoChild,
+      HeroHeaderChildren,
+      HeroDescriptionChild,
+    } = useMemo(() => {
+      const result = React.Children.toArray(children).reduce<{
+        HeroActions: React.ReactElement[]
+        HeroButtonGroupChild?: React.ReactElement
+        HeroImageChild?: React.ReactElement<HeroImageProps>
+        HeroVideoChild?: React.ReactElement<HeroVideoProps>
+        HeroChildren: React.ReactElement[]
+        HeroHeaderChildren: React.ReactElement[]
+        HeroDescriptionChild?: React.ReactElement
+      }>(
+        (acc, child) => {
+          if (React.isValidElement(child)) {
+            if (child.type === HeroPrimaryAction || child.type === HeroSecondaryAction) {
+              acc.HeroActions.push(child)
+            } else if (child.type === HeroButtonGroup) {
+              acc.HeroButtonGroupChild = child
+            } else if (child.type === HeroImage) {
+              acc.HeroImageChild = child as React.ReactElement<HeroImageProps>
+            } else if (child.type === HeroVideo) {
+              acc.HeroVideoChild = child as React.ReactElement<HeroVideoProps>
+            } else {
+              acc.HeroChildren.push(child)
+              if (child.type === HeroLabel || child.type === HeroEyebrow || child.type === HeroHeading) {
+                acc.HeroHeaderChildren.push(child)
+              } else if (child.type === HeroDescription) {
+                acc.HeroDescriptionChild = child
               }
             }
-            return acc
-          },
-          {
-            HeroActions: [],
-            HeroChildren: [],
-            HeroImageChild: undefined,
-            HeroVideoChild: undefined,
-            HeroHeaderChildren: [],
-            HeroDescriptionChild: undefined,
-          },
-        )
+          }
+          return acc
+        },
+        {
+          HeroActions: [],
+          HeroButtonGroupChild: undefined,
+          HeroChildren: [],
+          HeroImageChild: undefined,
+          HeroVideoChild: undefined,
+          HeroHeaderChildren: [],
+          HeroDescriptionChild: undefined,
+        },
+      )
 
-        // Prefer Hero.Image - don't show both
-        if (result.HeroImageChild && result.HeroVideoChild) {
-          result.HeroVideoChild = undefined
-        }
+      // Prefer Hero.Image - don't show both
+      if (result.HeroImageChild && result.HeroVideoChild) {
+        result.HeroVideoChild = undefined
+      }
 
-        return result
-      }, [children])
+      return result
+    }, [children])
 
     const mediaPositionProp = HeroImageChild?.props.position || HeroVideoChild?.props.position
 
@@ -139,13 +151,23 @@ const Root = forwardRef<HTMLElement, PropsWithChildren<HeroProps>>(
       return mediaPositionProp || 'block-end'
     })()
     const mediaWrapperHasBorder = HeroImageChild?.props.enableBorder ?? HeroVideoChild?.props.enableBorder ?? true
-    const hasInlineMedia = heroMediaInlinePositions.includes(mediaPosition as HeroMediaInlinePositions)
-    const inlineMediaPosition = hasInlineMedia ? mediaPosition : undefined
+    const mediaPadding = HeroImageChild?.props.padding ?? HeroVideoChild?.props.padding ?? 'default'
+    const hasInlineMedia = HeroMediaInlinePositionOptions.includes(mediaPosition as HeroMediaInlinePosition)
     const mediaChild = HeroImageChild || HeroVideoChild
     const isGridline = variant === 'gridline'
     const isGridlineExpressive = variant === 'gridline-expressive'
-    const isBlockEndPosition = mediaPosition === 'block-end' || mediaPosition === 'block-end-padded'
-    const isBlockEndPadded = mediaPosition === 'block-end-padded'
+    const isBlockEndPosition = mediaPosition === 'block-end'
+
+    if (
+      variant === 'default' &&
+      mediaPadding !== 'default' &&
+      (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')
+    ) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `Hero: media padding is only supported by the "gridline" and "gridline-expressive" variants; ignoring padding="${mediaPadding}".`,
+      )
+    }
 
     const isInvalidGridlineAlignment = isGridlineExpressive && alignProp === 'center'
     const align: HeroAlign = isInvalidGridlineAlignment ? 'start' : alignProp
@@ -168,7 +190,7 @@ const Root = forwardRef<HTMLElement, PropsWithChildren<HeroProps>>(
     const useInlineGridline = isGridline && hasInlineMedia
 
     const heroLayoutClass = HeroImageChild ? styles['Hero--layout-image'] : styles['Hero--layout-default']
-    const isInlineStart = mediaPosition === 'inline-start' || mediaPosition === 'inline-start-padded'
+    const isInlineStart = mediaPosition === 'inline-start'
 
     const renderTrailingComponent = (shouldAnimate: boolean) =>
       TrailingComponent && (
@@ -179,7 +201,12 @@ const Root = forwardRef<HTMLElement, PropsWithChildren<HeroProps>>(
         </Box>
       )
 
-    const renderActions = () => HeroActions.length > 0 && <div className={styles['Hero-actions']}>{HeroActions}</div>
+    const renderActions = () => (
+      <>
+        {HeroButtonGroupChild}
+        {HeroActions.length > 0 && <div className={styles['Hero-actions']}>{HeroActions}</div>}
+      </>
+    )
 
     return (
       <Tag {...tagProps}>
@@ -242,10 +269,15 @@ const Root = forwardRef<HTMLElement, PropsWithChildren<HeroProps>>(
                       ref={imageContainerRef}
                       span={{large: 6}}
                       className={clsx(
-                        imageBackgroundColor && styles[`Hero-imageContainer--bg-${imageBackgroundColor}`],
+                        imageBackgroundColor &&
+                          mediaPadding !== 'none' &&
+                          styles[`Hero-imageContainer--bg-${imageBackgroundColor}`],
+                        useInlineGridline &&
+                          mediaPadding === 'all' &&
+                          styles['Hero-imageContainer--inline-padding-all'],
                         useInlineGridline &&
-                          inlineMediaPosition?.includes('padded') &&
-                          styles['Hero-imageContainer--inline-bg-padded'],
+                          mediaPadding === 'none' &&
+                          styles['Hero-imageContainer--inline-padding-none'],
                         useInlineGridline && styles['Hero-imageContainer--inline-bordered'],
                       )}
                     >
@@ -279,10 +311,15 @@ const Root = forwardRef<HTMLElement, PropsWithChildren<HeroProps>>(
                       ref={imageContainerRef}
                       span={{large: hasInlineMedia ? 6 : 12}}
                       className={clsx(
-                        imageBackgroundColor && styles[`Hero-imageContainer--bg-${imageBackgroundColor}`],
+                        imageBackgroundColor &&
+                          mediaPadding !== 'none' &&
+                          styles[`Hero-imageContainer--bg-${imageBackgroundColor}`],
                         useInlineGridline &&
-                          inlineMediaPosition?.includes('padded') &&
-                          styles['Hero-imageContainer--inline-bg-padded'],
+                          mediaPadding === 'all' &&
+                          styles['Hero-imageContainer--inline-padding-all'],
+                        useInlineGridline &&
+                          mediaPadding === 'none' &&
+                          styles['Hero-imageContainer--inline-padding-none'],
                         useInlineGridline && styles['Hero-imageContainer--inline-bordered'],
                       )}
                     >
@@ -303,16 +340,19 @@ const Root = forwardRef<HTMLElement, PropsWithChildren<HeroProps>>(
                 data-testid={testIds.imageWrapper}
                 className={clsx(
                   styles['Hero-imageWrapper'],
-                  isBlockEndPadded && styles['Hero-imageWrapper--block-end-padded'],
                   imageContainerClassName,
-                  imageBackgroundColor && styles[`Hero-imageWrapper--bg-${imageBackgroundColor}`],
+                  imageBackgroundColor &&
+                    mediaPadding !== 'none' &&
+                    styles[`Hero-imageWrapper--bg-${imageBackgroundColor}`],
+                  mediaPadding === 'none' && styles['Hero-imageWrapper--padding-none'],
                 )}
                 style={imageContainerStyle}
               >
                 <div
                   className={clsx(
                     styles['Hero-imageWrapper-inner'],
-                    isBlockEndPadded && styles['Hero-imageWrapper-inner--padded'],
+                    mediaPadding === 'all' && styles['Hero-imageWrapper-inner--padding-all'],
+                    mediaPadding === 'none' && styles['Hero-imageWrapper-inner--padding-none'],
                     mediaWrapperHasBorder && styles['Hero-imageWrapper-inner--with-gridline'],
                   )}
                 >
@@ -330,7 +370,16 @@ const Root = forwardRef<HTMLElement, PropsWithChildren<HeroProps>>(
 export const Hero = Object.assign(Root, {
   Heading: HeroHeading,
   Description: HeroDescription,
+  ButtonGroup: HeroButtonGroup,
+  /**
+   * @deprecated Use `Hero.ButtonGroup` with `Button` or `ActionMenu` children instead.
+   * This component will be removed in a future release.
+   */
   PrimaryAction: HeroPrimaryAction,
+  /**
+   * @deprecated Use `Hero.ButtonGroup` with `Button` or `ActionMenu` children instead.
+   * This component will be removed in a future release.
+   */
   SecondaryAction: HeroSecondaryAction,
   Image: HeroImage,
   Video: HeroVideo,
diff --git a/packages/react/src/Hero/Hero.visual.spec.ts b/packages/react/src/Hero/Hero.visual.spec.ts
index 9dc559ef66..1b318a6c0c 100644
--- a/packages/react/src/Hero/Hero.visual.spec.ts
+++ b/packages/react/src/Hero/Hero.visual.spec.ts
@@ -179,9 +179,20 @@ test.describe('Visual Comparison: Hero', () => {
     await expect(page).toHaveScreenshot({fullPage: true})
   })
 
-  test('Hero / With Secondary Action', async ({page}) => {
+  test('Hero / With Legacy Primary And Secondary Actions', async ({page}) => {
     await page.goto(
-      'http://localhost:6006/iframe.html?args=&id=components-hero-features--with-secondary-action&viewMode=story',
+      'http://localhost:6006/iframe.html?args=&id=components-hero-features--with-legacy-primary-and-secondary-actions&viewMode=story',
+      {waitUntil: 'networkidle'},
+    )
+    await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+    await page.waitForTimeout(500)
+    await expect(page).toHaveScreenshot({fullPage: true})
+  })
+
+  test('Hero / With Action Menu', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-hero-features--with-action-menu&viewMode=story',
       {waitUntil: 'networkidle'},
     )
     await page.locator('body.sb-show-main').waitFor({state: 'visible'})
@@ -295,6 +306,17 @@ test.describe('Visual Comparison: Hero', () => {
     await expect(page).toHaveScreenshot({fullPage: true})
   })
 
+  test('Hero / Gridline default variant: Image without padding', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-hero-features-gridline-variants--gridline-image-without-padding&viewMode=story',
+      {waitUntil: 'networkidle'},
+    )
+    await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+    await page.waitForTimeout(500)
+    await expect(page).toHaveScreenshot({fullPage: true})
+  })
+
   test('Hero / Gridline default variant: Centered', async ({page}) => {
     await page.goto(
       'http://localhost:6006/iframe.html?args=&id=components-hero-features-gridline-variants--gridline-centered&viewMode=story',
@@ -372,6 +394,17 @@ test.describe('Visual Comparison: Hero', () => {
     await expect(page).toHaveScreenshot({fullPage: true})
   })
 
+  test('Hero / Gridline default variant: YouTube video without padding', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-hero-features-gridline-variants--gridline-youtube-video-without-padding&viewMode=story',
+      {waitUntil: 'networkidle'},
+    )
+    await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+    await page.waitForTimeout(500)
+    await expect(page).toHaveScreenshot({fullPage: true})
+  })
+
   test('Hero / Gridline default variant: Inline-end YouTube video', async ({page}) => {
     await page.goto(
       'http://localhost:6006/iframe.html?args=&id=components-hero-features-gridline-variants--gridline-youtube-video-inline-end&viewMode=story',
@@ -416,6 +449,17 @@ test.describe('Visual Comparison: Hero', () => {
     await expect(page).toHaveScreenshot({fullPage: true})
   })
 
+  test('Hero / Expressive variant: Image without padding', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-hero-features-gridline-variants--gridline-expressive-image-without-padding&viewMode=story',
+      {waitUntil: 'networkidle'},
+    )
+    await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+    await page.waitForTimeout(500)
+    await expect(page).toHaveScreenshot({fullPage: true})
+  })
+
   // eslint-disable-next-line i18n-text/no-en
   test.describe('Mobile viewport test for Expressive variant (narrow)', () => {
     test.use({viewport: {width: 360, height: 800}})
diff --git a/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Expressive-variant-Image-without-padding-1-darwin.png b/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Expressive-variant-Image-without-padding-1-darwin.png
new file mode 100644
index 0000000000..3b8d1d06ad
Binary files /dev/null and b/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Expressive-variant-Image-without-padding-1-darwin.png differ
diff --git a/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Gridline-default-variant-Image-without-padding-1-darwin.png b/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Gridline-default-variant-Image-without-padding-1-darwin.png
new file mode 100644
index 0000000000..a2b236be09
Binary files /dev/null and b/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Gridline-default-variant-Image-without-padding-1-darwin.png differ
diff --git a/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Gridline-default-variant-YouTube-video-without-padding-1-darwin.png b/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Gridline-default-variant-YouTube-video-without-padding-1-darwin.png
new file mode 100644
index 0000000000..920e51991d
Binary files /dev/null and b/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Gridline-default-variant-YouTube-video-without-padding-1-darwin.png differ
diff --git a/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Hero-with-cards-1-darwin.png b/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Hero-with-cards-1-darwin.png
index deee918c89..1b07831be4 100644
Binary files a/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Hero-with-cards-1-darwin.png and b/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Hero-with-cards-1-darwin.png differ
diff --git a/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-With-Action-Menu-1-darwin.png b/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-With-Action-Menu-1-darwin.png
new file mode 100644
index 0000000000..67d9b37e0e
Binary files /dev/null and b/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-With-Action-Menu-1-darwin.png differ
diff --git a/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-With-Legacy-Primary-And-Secondary-Actions-1-darwin.png b/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-With-Legacy-Primary-And-Secondary-Actions-1-darwin.png
new file mode 100644
index 0000000000..b8950ecd93
Binary files /dev/null and b/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-With-Legacy-Primary-And-Secondary-Actions-1-darwin.png differ
diff --git a/packages/react/src/Hero/HeroContext.ts b/packages/react/src/Hero/HeroContext.ts
index 340185db89..3257e60fc1 100644
--- a/packages/react/src/Hero/HeroContext.ts
+++ b/packages/react/src/Hero/HeroContext.ts
@@ -6,17 +6,13 @@ export type HeroAlign = (typeof HeroAlignOptions)[number]
 export const HeroVariantOptions = ['default', 'gridline', 'gridline-expressive'] as const
 export type HeroVariant = (typeof HeroVariantOptions)[number]
 
-export const heroMediaPositions = [
-  'block-end',
-  'block-end-padded',
-  'inline-start',
-  'inline-end',
-  'inline-end-padded',
-  'inline-start-padded',
-] as const
-export const heroMediaInlinePositions = heroMediaPositions.filter(pos => pos.startsWith('inline-'))
-export type HeroMediaPositions = (typeof heroMediaPositions)[number]
-export type HeroMediaInlinePositions = (typeof heroMediaInlinePositions)[number]
+export const HeroMediaPaddingOptions = ['default', 'none', 'all'] as const
+export type HeroMediaPadding = (typeof HeroMediaPaddingOptions)[number]
+
+export const HeroMediaPositionOptions = ['block-end', 'inline-start', 'inline-end'] as const
+export const HeroMediaInlinePositionOptions = ['inline-start', 'inline-end'] as const
+export type HeroMediaPosition = (typeof HeroMediaPositionOptions)[number]
+export type HeroMediaInlinePosition = (typeof HeroMediaInlinePositionOptions)[number]
 
 type HeroContextType = {
   /**
@@ -30,7 +26,7 @@ type HeroContextType = {
   /**
    * Image position within the Hero
    */
-  imagePosition: HeroMediaPositions
+  imagePosition: HeroMediaPosition
   /**
    * Hero.Image is an inline media position
    */
diff --git a/packages/react/src/Hero/sub-components/HeroButtonGroup.tsx b/packages/react/src/Hero/sub-components/HeroButtonGroup.tsx
new file mode 100644
index 0000000000..4ab0918213
--- /dev/null
+++ b/packages/react/src/Hero/sub-components/HeroButtonGroup.tsx
@@ -0,0 +1,36 @@
+import React, {forwardRef} from 'react'
+import {clsx} from 'clsx'
+import {Box} from '../../Box'
+import {ButtonGroup} from '../../ButtonGroup'
+import {useHeroContext} from '../HeroContext'
+
+import styles from '../Hero.module.css'
+
+export type HeroButtonGroupProps = React.ComponentProps<typeof ButtonGroup>
+
+export const HeroButtonGroup = forwardRef<HTMLDivElement, HeroButtonGroupProps>(
+  ({className, children, ...props}, ref) => {
+    const {variant, enableAnimation} = useHeroContext()
+    const isGridline = variant === 'gridline' || variant === 'gridline-expressive'
+    const Tag = isGridline ? Box : React.Fragment
+    const tagProps = isGridline
+      ? {
+          animate: enableAnimation
+            ? {
+                variant: 'slide-in-up' as const,
+                delay: 750,
+                duration: 1000,
+              }
+            : undefined,
+        }
+      : {}
+
+    return (
+      <Tag {...tagProps}>
+        <ButtonGroup ref={ref} className={clsx(styles['Hero-actions'], className)} {...props}>
+          {children}
+        </ButtonGroup>
+      </Tag>
+    )
+  },
+)
diff --git a/packages/react/src/Hero/sub-components/HeroImage.tsx b/packages/react/src/Hero/sub-components/HeroImage.tsx
index dea502578c..c3aac0f962 100644
--- a/packages/react/src/Hero/sub-components/HeroImage.tsx
+++ b/packages/react/src/Hero/sub-components/HeroImage.tsx
@@ -1,22 +1,22 @@
-import {forwardRef, PropsWithChildren} from 'react'
+import {forwardRef} from 'react'
 import {clsx} from 'clsx'
 import {Image, ImageProps} from '../../Image'
 import type {BaseProps} from '../../component-helpers'
-import {useHeroContext, type HeroMediaPositions} from '../HeroContext'
+import {useHeroContext, type HeroMediaPadding, type HeroMediaPosition} from '../HeroContext'
 
 import styles from '../Hero.module.css'
 
 export type HeroImageProps = {
-  position?: HeroMediaPositions
+  position?: HeroMediaPosition
+  padding?: HeroMediaPadding
   enableBorder?: boolean
 } & ImageProps &
   BaseProps<HTMLImageElement>
 
 export const HeroImage = forwardRef<HTMLImageElement, HeroImageProps>(
-  ({position = 'block-end', className, enableBorder, ...rest}: PropsWithChildren<HeroImageProps>, ref) => {
+  ({position = 'block-end', padding = 'default', className, enableBorder, ...rest}: HeroImageProps, ref) => {
     const {variant: heroVariant, enableAnimation} = useHeroContext()
     const isInlinePosition = position.startsWith('inline')
-    const isInlinePadded = position.endsWith('-padded')
     return (
       <Image
         animate={
@@ -34,7 +34,8 @@ export const HeroImage = forwardRef<HTMLImageElement, HeroImageProps>(
           styles['Hero-media'],
           styles[`Hero-media--pos-${position}`],
           isInlinePosition && styles['Hero-media--pos-inline'],
-          isInlinePosition && isInlinePadded && styles['Hero-media--pos-inline-padded'],
+          padding === 'all' && styles['Hero-media--padding-all'],
+          padding === 'none' && styles['Hero-media--padding-none'],
           className,
         )}
         {...rest}
diff --git a/packages/react/src/Hero/sub-components/HeroVideo.tsx b/packages/react/src/Hero/sub-components/HeroVideo.tsx
index 7583fc2402..b248adfd87 100644
--- a/packages/react/src/Hero/sub-components/HeroVideo.tsx
+++ b/packages/react/src/Hero/sub-components/HeroVideo.tsx
@@ -1,7 +1,7 @@
 import React, {forwardRef, PropsWithChildren} from 'react'
 import {clsx} from 'clsx'
 import type {BaseProps} from '../../component-helpers'
-import type {HeroMediaPositions} from '../HeroContext'
+import type {HeroMediaPadding, HeroMediaPosition} from '../HeroContext'
 import {useProvidedRefOrCreate} from '../../hooks/useRef'
 
 import styles from '../Hero.module.css'
@@ -10,7 +10,11 @@ import {PlayIcon} from '../../VideoPlayer/components/PlayIcon'
 import {MarkGithubIcon} from '@primer/octicons-react'
 
 type HeroVideoBaseProps = {
-  position?: HeroMediaPositions
+  position?: HeroMediaPosition
+  /**
+   * Controls the padding around media in gridline layouts. `default` preserves the padding recommended for the position.
+   */
+  padding?: HeroMediaPadding
   enableBorder?: boolean
   'data-testid'?: string
 } & PropsWithChildren<BaseProps<HTMLDivElement>>
@@ -28,6 +32,7 @@ export const HeroVideo = forwardRef<HTMLDivElement, HeroVideoProps>(
       className,
       children,
       position = 'block-end',
+      padding = 'default',
       poster,
       posterTitle,
       posterAltText,
@@ -40,14 +45,14 @@ export const HeroVideo = forwardRef<HTMLDivElement, HeroVideoProps>(
     const [showVideo, setShowVideo] = React.useState(poster ? false : true)
     const containerRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLDivElement>)
     const isInlinePosition = position.startsWith('inline')
-    const isInlinePadded = position.endsWith('-padded')
 
     const mediaClasses = clsx(
       styles['Hero-video'],
       styles['Hero-media'],
       styles[`Hero-media--pos-${position}`],
       isInlinePosition && styles['Hero-media--pos-inline'],
-      isInlinePosition && isInlinePadded && styles['Hero-media--pos-inline-padded'],
+      padding === 'all' && styles['Hero-media--padding-all'],
+      padding === 'none' && styles['Hero-media--padding-none'],
       className,
     )
 
diff --git a/packages/react/src/Hero/sub-components/index.ts b/packages/react/src/Hero/sub-components/index.ts
index 3f3114d28d..a229b7a400 100644
--- a/packages/react/src/Hero/sub-components/index.ts
+++ b/packages/react/src/Hero/sub-components/index.ts
@@ -7,6 +7,9 @@ export type {HeroHeadingProps} from './HeroHeading'
 export {HeroDescription} from './HeroDescription'
 export type {HeroDescriptionProps} from './HeroDescription'
 
+export {HeroButtonGroup} from './HeroButtonGroup'
+export type {HeroButtonGroupProps} from './HeroButtonGroup'
+
 export {HeroImage} from './HeroImage'
 export type {HeroImageProps} from './HeroImage'
 
diff --git a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-Mobile-view-2fbdc-bdomainNavBar-Mobile-Search-Results-Visible-1-darwin.png b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-Mobile-view-2fbdc-bdomainNavBar-Mobile-Search-Results-Visible-1-darwin.png
index 523df2e591..7fc9ae3a12 100644
Binary files a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-Mobile-view-2fbdc-bdomainNavBar-Mobile-Search-Results-Visible-1-darwin.png and b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-Mobile-view-2fbdc-bdomainNavBar-Mobile-Search-Results-Visible-1-darwin.png differ
diff --git a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-Mobile-view-8d921-for-Mobile-View-SubdomainNavBar-Mobile-View-1-darwin.png b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-Mobile-view-8d921-for-Mobile-View-SubdomainNavBar-Mobile-View-1-darwin.png
index 0d05120d2d..c8fbdf1269 100644
Binary files a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-Mobile-view-8d921-for-Mobile-View-SubdomainNavBar-Mobile-View-1-darwin.png and b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-Mobile-view-8d921-for-Mobile-View-SubdomainNavBar-Mobile-View-1-darwin.png differ
diff --git a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-Mobile-view-98fdb-SubdomainNavBar-Mobile-Menu-Open-Many-Items-1-darwin.png b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-Mobile-view-98fdb-SubdomainNavBar-Mobile-Menu-Open-Many-Items-1-darwin.png
index 176bbe369d..fdb33a43b2 100644
Binary files a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-Mobile-view-98fdb-SubdomainNavBar-Mobile-Menu-Open-Many-Items-1-darwin.png and b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-Mobile-view-98fdb-SubdomainNavBar-Mobile-Menu-Open-Many-Items-1-darwin.png differ
diff --git a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-Mobile-view-e88bc--Menu-Open-SubdomainNavBar-Mobile-Menu-Open-1-darwin.png b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-Mobile-view-e88bc--Menu-Open-SubdomainNavBar-Mobile-Menu-Open-1-darwin.png
index 841c423a58..f72bbccb76 100644
Binary files a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-Mobile-view-e88bc--Menu-Open-SubdomainNavBar-Mobile-Menu-Open-1-darwin.png and b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-Mobile-view-e88bc--Menu-Open-SubdomainNavBar-Mobile-Menu-Open-1-darwin.png differ
diff --git a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Full-Width-1-darwin.png b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Full-Width-1-darwin.png
index d9227cc72b..8a82979b62 100644
Binary files a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Full-Width-1-darwin.png and b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Full-Width-1-darwin.png differ
diff --git a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Longer-Title-1-darwin.png b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Longer-Title-1-darwin.png
index 019748f971..540da5a6cc 100644
Binary files a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Longer-Title-1-darwin.png and b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Longer-Title-1-darwin.png differ
diff --git a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-No-Search-1-darwin.png b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-No-Search-1-darwin.png
index 262c8b0b3c..8f9073252a 100644
Binary files a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-No-Search-1-darwin.png and b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-No-Search-1-darwin.png differ
diff --git a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-No-overflow-menu-1-link-1-darwin.png b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-No-overflow-menu-1-link-1-darwin.png
index d92532cd92..41f62604d9 100644
Binary files a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-No-overflow-menu-1-link-1-darwin.png and b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-No-overflow-menu-1-link-1-darwin.png differ
diff --git a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Playground-1-darwin.png b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Playground-1-darwin.png
index cd332b8261..8a82979b62 100644
Binary files a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Playground-1-darwin.png and b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Playground-1-darwin.png differ
diff --git a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Search-Open-1-darwin.png b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Search-Open-1-darwin.png
index 6102121f4a..49ecefd814 100644
Binary files a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Search-Open-1-darwin.png and b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Search-Open-1-darwin.png differ
diff --git a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Search-Results-Visible-1-darwin.png b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Search-Results-Visible-1-darwin.png
index b1a7f7ac87..158c1a47eb 100644
Binary files a/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Search-Results-Visible-1-darwin.png and b/packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts-snapshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Search-Results-Visible-1-darwin.png differ
diff --git a/packages/react/src/recipes/Flexsuite/Category/FlexSuiteSecurityCategory/FlexSuiteSecurityCategory.tsx b/packages/react/src/recipes/Flexsuite/Category/FlexSuiteSecurityCategory/FlexSuiteSecurityCategory.tsx
index 06055b7dbe..c2352a9e90 100644
--- a/packages/react/src/recipes/Flexsuite/Category/FlexSuiteSecurityCategory/FlexSuiteSecurityCategory.tsx
+++ b/packages/react/src/recipes/Flexsuite/Category/FlexSuiteSecurityCategory/FlexSuiteSecurityCategory.tsx
@@ -76,8 +76,14 @@ export function FlexSuiteSecurityCategoryTemplate({content}: FlexSuiteSecurityCa
         <Hero align="center">
           <Hero.Label>{content.hero.label}</Hero.Label>
           <Hero.Heading>{content.hero.heading}</Hero.Heading>
-          <Hero.PrimaryAction href="#">{content.hero.primaryAction}</Hero.PrimaryAction>
-          <Hero.SecondaryAction href="#">{content.hero.secondaryAction}</Hero.SecondaryAction>
+          <Hero.ButtonGroup>
+            <Button as="a" href="#" variant="primary">
+              {content.hero.primaryAction}
+            </Button>
+            <Button as="a" href="#" variant="secondary">
+              {content.hero.secondaryAction}
+            </Button>
+          </Hero.ButtonGroup>
         </Hero>
       </Section>
       <Stack justifyContent="center" padding="none" style={{marginTop: 'calc(var(--base-size-64) * -1)'}}>
diff --git a/packages/react/src/recipes/Flexsuite/Details/FlexSuiteAIDetailsPlaylist/FlexSuiteAIDetailsPlaylist.tsx b/packages/react/src/recipes/Flexsuite/Details/FlexSuiteAIDetailsPlaylist/FlexSuiteAIDetailsPlaylist.tsx
index 037b37c19c..efb20d8c27 100644
--- a/packages/react/src/recipes/Flexsuite/Details/FlexSuiteAIDetailsPlaylist/FlexSuiteAIDetailsPlaylist.tsx
+++ b/packages/react/src/recipes/Flexsuite/Details/FlexSuiteAIDetailsPlaylist/FlexSuiteAIDetailsPlaylist.tsx
@@ -84,7 +84,11 @@ export function FlexSuiteAIDetailsPlaylistTemplate({content}: FlexSuiteAIDetails
             <br /> <b>{content.hero.headingEmphasis}</b>
           </Hero.Heading>
           <Hero.Description>{content.hero.description}</Hero.Description>
-          <Hero.PrimaryAction href="#">{content.hero.primaryAction}</Hero.PrimaryAction>
+          <Hero.ButtonGroup>
+            <Button as="a" href="#" variant="primary">
+              {content.hero.primaryAction}
+            </Button>
+          </Hero.ButtonGroup>
         </Hero>
       </Box>
 
diff --git a/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx b/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx
index dc7bc0f9d4..3b87ae7d8e 100644
--- a/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx
+++ b/packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx
@@ -4,6 +4,7 @@ import React, {useEffect} from 'react'
 
 import {
   Box,
+  Button,
   Card,
   ColorModesEnum,
   CTABanner,
@@ -124,8 +125,14 @@ export function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTempla
               {content.hero.headingLine1} <br /> {content.hero.headingLine2}
             </Hero.Heading>
             <Hero.Description>{content.hero.description}</Hero.Description>
-            <Hero.PrimaryAction href="#">{content.hero.primaryAction}</Hero.PrimaryAction>
-            <Hero.SecondaryAction href="#">{content.hero.secondaryAction}</Hero.SecondaryAction>
+            <Hero.ButtonGroup>
+              <Button as="a" href="#" variant="primary">
+                {content.hero.primaryAction}
+              </Button>
+              <Button as="a" href="#" variant="secondary">
+                {content.hero.secondaryAction}
+              </Button>
+            </Hero.ButtonGroup>
             <Hero.Image
               enableBorder={false}
               position="block-end"
diff --git a/packages/react/src/recipes/Flexsuite/Overview/Overview.visual.spec.ts-snapshots/Visual-Comparison-Overview-Overview-AI-1-darwin.png b/packages/react/src/recipes/Flexsuite/Overview/Overview.visual.spec.ts-snapshots/Visual-Comparison-Overview-Overview-AI-1-darwin.png
index b96f236c06..93ebf47aa3 100644
Binary files a/packages/react/src/recipes/Flexsuite/Overview/Overview.visual.spec.ts-snapshots/Visual-Comparison-Overview-Overview-AI-1-darwin.png and b/packages/react/src/recipes/Flexsuite/Overview/Overview.visual.spec.ts-snapshots/Visual-Comparison-Overview-Overview-AI-1-darwin.png differ
diff --git a/packages/react/src/river/River/River.gridline.stories.tsx b/packages/react/src/river/River/River.gridline.stories.tsx
index 2893ab00ec..1e82fd761a 100644
--- a/packages/react/src/river/River/River.gridline.stories.tsx
+++ b/packages/react/src/river/River/River.gridline.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import type {Meta, StoryObj} from '@storybook/react'
 
+import examplePoster from '../../fixtures/images/example-poster.png'
 import placeholderImage from '../../fixtures/images/placeholder.png'
 
 import {River} from '.'
@@ -92,7 +93,7 @@ export const GridLineWithBackground: Story = {
   render: () => (
     <Section>
       <River variant="gridline" align="start">
-        <River.Visual>
+        <River.Visual position="default" padding="default">
           <PlaceholderImage />
         </River.Visual>
         <River.Content>
@@ -146,6 +147,138 @@ export const GridLineWithBackgroundCenter: Story = {
   ),
 }
 
+export const GridLineVisualPositionCenter: Story = {
+  name: 'GridLine visual position: Center',
+  render: () => (
+    <Section>
+      <River variant="gridline" align="start">
+        <River.Visual position="center">
+          <PlaceholderImage />
+        </River.Visual>
+        <River.Content>
+          <EyebrowText>Feature</EyebrowText>
+          <Heading>Visual centered</Heading>
+          <Text>
+            Visual uses center positioning, which applies padding on all sides by default. A subtle background color
+            adds some contrast.
+          </Text>
+          <Link href="#">Call to action</Link>
+        </River.Content>
+      </River>
+    </Section>
+  ),
+}
+
+export const GridLineVisualPositionBlockEnd: Story = {
+  name: 'GridLine visual position: Block end',
+  render: () => (
+    <Section>
+      <River variant="gridline" align="start">
+        <River.Visual position="block-end">
+          <PlaceholderImage />
+        </River.Visual>
+        <River.Content>
+          <EyebrowText>Feature</EyebrowText>
+          <Heading>Visual aligned to the bottom</Heading>
+          <Text>
+            Visual uses block-end positioning, making it flush to the bottom with padding on the top and sides. A subtle
+            background color adds some contrast.
+          </Text>
+          <Link href="#">Call to action</Link>
+        </River.Content>
+      </River>
+    </Section>
+  ),
+}
+
+export const GridLineVisualPositionBlockEndInlineStart: Story = {
+  name: 'GridLine visual position: Block end, inline start',
+  render: () => (
+    <Section>
+      <River variant="gridline" align="end">
+        <River.Visual position="block-end-inline-start">
+          <PlaceholderImage />
+        </River.Visual>
+        <River.Content>
+          <EyebrowText>Feature</EyebrowText>
+          <Heading>Visual aligned to the bottom left</Heading>
+          <Text>
+            Visual uses block-end, inline-start positioning, making it flush to the bottom and left with padding on the
+            top and right. A subtle background color adds some contrast.
+          </Text>
+          <Link href="#">Call to action</Link>
+        </River.Content>
+      </River>
+    </Section>
+  ),
+}
+
+export const GridLineVisualPositionBlockEndInlineEnd: Story = {
+  name: 'GridLine visual position: Block end, inline end',
+  render: () => (
+    <Section>
+      <River variant="gridline" align="start">
+        <River.Visual position="block-end-inline-end">
+          <PlaceholderImage />
+        </River.Visual>
+        <River.Content>
+          <EyebrowText>Feature</EyebrowText>
+          <Heading>Visual aligned to the bottom right</Heading>
+          <Text>
+            Visual uses block-end, inline-end positioning, making it flush to the bottom and right with padding on the
+            top and left. A subtle background color adds some contrast.
+          </Text>
+          <Link href="#">Call to action</Link>
+        </River.Content>
+      </River>
+    </Section>
+  ),
+}
+
+export const GridLineVisualPaddingNone: Story = {
+  name: 'GridLine visual padding: None',
+  render: () => (
+    <Section>
+      <River variant="gridline" align="start">
+        <River.Visual position="center" padding="none">
+          <img src={examplePoster} alt="Mona looking through binoculars" />
+        </River.Visual>
+        <River.Content>
+          <EyebrowText>Feature</EyebrowText>
+          <Heading>Full-bleed visual</Heading>
+          <Text>
+            Visual uses no padding, making the media fill the full visual region with square corners. A subtle
+            background color sits behind the media.
+          </Text>
+          <Link href="#">Call to action</Link>
+        </River.Content>
+      </River>
+    </Section>
+  ),
+}
+
+export const GridLineVisualPaddingAll: Story = {
+  name: 'GridLine visual padding: All',
+  render: () => (
+    <Section>
+      <River variant="gridline" align="start">
+        <River.Visual padding="all">
+          <PlaceholderImage />
+        </River.Visual>
+        <River.Content>
+          <EyebrowText>Feature</EyebrowText>
+          <Heading>Visual inset on every side</Heading>
+          <Text>
+            Visual uses padding on all sides, keeping the media inset with rounded corners. A subtle background color
+            adds some contrast.
+          </Text>
+          <Link href="#">Call to action</Link>
+        </River.Content>
+      </River>
+    </Section>
+  ),
+}
+
 export const GridLineWithEyebrowText: Story = {
   name: 'GridLine variant (with EyebrowText)',
   render: () => (
diff --git a/packages/react/src/river/River/River.test.tsx b/packages/react/src/river/River/River.test.tsx
index 66c631e2cf..79c74aa516 100644
--- a/packages/react/src/river/River/River.test.tsx
+++ b/packages/react/src/river/River/River.test.tsx
@@ -1,4 +1,5 @@
-import React, {render, cleanup} from '@testing-library/react'
+import React from 'react'
+import {render, cleanup} from '@testing-library/react'
 import '@testing-library/jest-dom'
 
 import {River} from '../'
@@ -428,6 +429,141 @@ describe('River', () => {
     expect(visualEl).toHaveClass('River__visual--has-background')
   })
 
+  it.each(['center', 'block-end', 'block-end-inline-start', 'block-end-inline-end'] as const)(
+    'applies the %s visual position in supported gridline Rivers',
+    position => {
+      const {getByTestId} = render(
+        <River variant="gridline">
+          <River.Visual data-testid="visual-el" position={position}>
+            <MockImage />
+          </River.Visual>
+          <River.Content>
+            <Text>{mockText}</Text>
+          </River.Content>
+        </River>,
+      )
+
+      expect(getByTestId('visual-el')).toHaveClass(`River__visual--position-${position}`)
+    },
+  )
+
+  it.each(['none', 'all'] as const)('applies %s visual padding in supported gridline Rivers', padding => {
+    const {getByTestId} = render(
+      <River variant="gridline">
+        <River.Visual data-testid="visual-el" padding={padding}>
+          <MockImage />
+        </River.Visual>
+        <River.Content>
+          <Text>{mockText}</Text>
+        </River.Content>
+      </River>,
+    )
+
+    expect(getByTestId('visual-el')).toHaveClass(`River__visual--padding-${padding}`)
+  })
+
+  it('combines visual position and padding modifiers', () => {
+    const {getByTestId} = render(
+      <River variant="gridline">
+        <River.Visual data-testid="visual-el" position="center" padding="none">
+          <MockImage />
+        </River.Visual>
+        <River.Content>
+          <Text>{mockText}</Text>
+        </River.Content>
+      </River>,
+    )
+
+    expect(getByTestId('visual-el')).toHaveClass('River__visual--position-center', 'River__visual--padding-none')
+  })
+
+  it('does not add or forward default visual layout props', () => {
+    const {getByTestId} = render(
+      <River variant="gridline">
+        <River.Visual data-testid="visual-el" position="default" padding="default">
+          <MockImage />
+        </River.Visual>
+        <River.Content>
+          <Text>{mockText}</Text>
+        </River.Content>
+      </River>,
+    )
+
+    const visualEl = getByTestId('visual-el')
+    expect(visualEl.className).not.toContain('River__visual--position-')
+    expect(visualEl.className).not.toContain('River__visual--padding-')
+    expect(visualEl).not.toHaveAttribute('position')
+    expect(visualEl).not.toHaveAttribute('padding')
+  })
+
+  it('warns when custom visual layout is used outside the gridline variant', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+    render(
+      <River>
+        <River.Visual position="block-end-inline-end">
+          <MockImage />
+        </River.Visual>
+        <River.Content>
+          <Text>{mockText}</Text>
+        </River.Content>
+      </River>,
+    )
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      'River: River.Visual position and padding are only supported when River uses variant="gridline"; ignoring position="block-end-inline-end" and padding="default".',
+    )
+
+    warnSpy.mockRestore()
+  })
+
+  it('supports visual layout overrides without a background color', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+    const {getByTestId} = render(
+      <River variant="gridline">
+        <River.Visual data-testid="visual-el" position="block-end" padding="none">
+          <MockImage />
+        </River.Visual>
+        <River.Content>
+          <Text>{mockText}</Text>
+        </River.Content>
+      </River>,
+    )
+
+    expect(getByTestId('visual-el')).toHaveClass('River__visual--position-block-end', 'River__visual--padding-none')
+    expect(warnSpy).not.toHaveBeenCalled()
+
+    warnSpy.mockRestore()
+  })
+
+  it('does not warn for supported or default visual layouts', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+    const {rerender} = render(
+      <River>
+        <River.Visual>
+          <MockImage />
+        </River.Visual>
+        <River.Content>
+          <Text>{mockText}</Text>
+        </River.Content>
+      </River>,
+    )
+
+    rerender(
+      <River variant="gridline">
+        <River.Visual position="block-end" padding="all">
+          <MockImage />
+        </River.Visual>
+        <River.Content>
+          <Text>{mockText}</Text>
+        </River.Content>
+      </River>,
+    )
+
+    expect(warnSpy).not.toHaveBeenCalled()
+
+    warnSpy.mockRestore()
+  })
+
   it('renders content with center alignment by default', () => {
     const contentId = 'content-el'
     const {getByTestId} = render(
diff --git a/packages/react/src/river/River/River.tsx b/packages/react/src/river/River/River.tsx
index c12fdef0e5..5357a1a6f7 100644
--- a/packages/react/src/river/River/River.tsx
+++ b/packages/react/src/river/River/River.tsx
@@ -90,6 +90,24 @@ const Root = forwardRef(
       {Visual: null, Content: null},
     )
 
+    const visualPosition = VisualChild?.props.position ?? 'default'
+    const visualPadding = VisualChild?.props.padding ?? 'default'
+    const hasNonDefaultPosition = visualPosition !== 'default'
+    const hasNonDefaultPadding = visualPadding !== 'default'
+    const hasVisualLayoutOverrides = hasNonDefaultPosition || hasNonDefaultPadding
+    const supportsVisualLayoutOverrides = variant === 'gridline'
+
+    if (
+      hasVisualLayoutOverrides &&
+      !supportsVisualLayoutOverrides &&
+      (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')
+    ) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `River: River.Visual position and padding are only supported when River uses variant="gridline"; ignoring position="${visualPosition}" and padding="${visualPadding}".`,
+      )
+    }
+
     const VisualChildWithVariantStyles = VisualChild
       ? React.cloneElement(VisualChild, {
           className: clsx(
@@ -249,7 +267,19 @@ export const RiverContent = forwardRef(
   },
 )
 
-export type RiverVisualProps = BaseProps<HTMLDivElement> &
+export const RiverVisualPositionOptions = [
+  'default',
+  'center',
+  'block-end',
+  'block-end-inline-start',
+  'block-end-inline-end',
+] as const
+export type RiverVisualPosition = (typeof RiverVisualPositionOptions)[number]
+
+export const RiverVisualPaddingOptions = ['default', 'none', 'all'] as const
+export type RiverVisualPadding = (typeof RiverVisualPaddingOptions)[number]
+
+export type RiverVisualBaseProps = BaseProps<HTMLDivElement> &
   React.HtmlHTMLAttributes<HTMLDivElement> &
   PropsWithChildren<{
     /**
@@ -269,16 +299,20 @@ export type RiverVisualProps = BaseProps<HTMLDivElement> &
     rounded?: boolean
   }>
 
-export const Visual = forwardRef(
+export type RiverVisualProps = RiverVisualBaseProps & {
+  /**
+   * Positions media within the visual region in the gridline variant.
+   */
+  position?: RiverVisualPosition
+  /**
+   * Controls media padding within the visual region in the gridline variant.
+   */
+  padding?: RiverVisualPadding
+}
+
+export const RiverVisualBase = forwardRef<HTMLDivElement, RiverVisualBaseProps>(
   (
-    {
-      fillMedia = true,
-      children,
-      className,
-      hasShadow = false,
-      rounded = true,
-      ...rest
-    }: PropsWithChildren<RiverVisualProps>,
+    {fillMedia = true, children, className, hasShadow = false, rounded = true, ...rest}: RiverVisualBaseProps,
     ref: Ref<HTMLDivElement>,
   ) => {
     return (
@@ -299,6 +333,20 @@ export const Visual = forwardRef(
   },
 )
 
+const Visual = forwardRef<HTMLDivElement, RiverVisualProps>(
+  ({className, position = 'default', padding = 'default', ...rest}, ref) => (
+    <RiverVisualBase
+      ref={ref}
+      className={clsx(
+        position !== 'default' && styles[`River__visual--position-${position}`],
+        padding !== 'default' && styles[`River__visual--padding-${padding}`],
+        className,
+      )}
+      {...rest}
+    />
+  ),
+)
+
 /**
  * Alternating text and image pairs.
  */
diff --git a/packages/react/src/river/River/River.visual.spec.ts b/packages/react/src/river/River/River.visual.spec.ts
index a3217db856..64b912f7e4 100644
--- a/packages/react/src/river/River/River.visual.spec.ts
+++ b/packages/react/src/river/River/River.visual.spec.ts
@@ -322,6 +322,72 @@ test.describe('Visual Comparison: River', () => {
     await expect(page).toHaveScreenshot({fullPage: true})
   })
 
+  test('River / GridLine visual position: Center', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-river-features-gridline-variants--grid-line-visual-position-center&viewMode=story',
+      {waitUntil: 'networkidle'},
+    )
+    await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+    await page.waitForTimeout(500)
+    await expect(page).toHaveScreenshot({fullPage: true})
+  })
+
+  test('River / GridLine visual position: Block end', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-river-features-gridline-variants--grid-line-visual-position-block-end&viewMode=story',
+      {waitUntil: 'networkidle'},
+    )
+    await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+    await page.waitForTimeout(500)
+    await expect(page).toHaveScreenshot({fullPage: true})
+  })
+
+  test('River / GridLine visual position: Block end, inline start', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-river-features-gridline-variants--grid-line-visual-position-block-end-inline-start&viewMode=story',
+      {waitUntil: 'networkidle'},
+    )
+    await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+    await page.waitForTimeout(500)
+    await expect(page).toHaveScreenshot({fullPage: true})
+  })
+
+  test('River / GridLine visual position: Block end, inline end', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-river-features-gridline-variants--grid-line-visual-position-block-end-inline-end&viewMode=story',
+      {waitUntil: 'networkidle'},
+    )
+    await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+    await page.waitForTimeout(500)
+    await expect(page).toHaveScreenshot({fullPage: true})
+  })
+
+  test('River / GridLine visual padding: None', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-river-features-gridline-variants--grid-line-visual-padding-none&viewMode=story',
+      {waitUntil: 'networkidle'},
+    )
+    await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+    await page.waitForTimeout(500)
+    await expect(page).toHaveScreenshot({fullPage: true})
+  })
+
+  test('River / GridLine visual padding: All', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-river-features-gridline-variants--grid-line-visual-padding-all&viewMode=story',
+      {waitUntil: 'networkidle'},
+    )
+    await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+    await page.waitForTimeout(500)
+    await expect(page).toHaveScreenshot({fullPage: true})
+  })
+
   test('River / GridLine variant (with EyebrowText)', async ({page}) => {
     await page.goto(
       'http://localhost:6006/iframe.html?args=&id=components-river-features-gridline-variants--grid-line-with-eyebrow-text&viewMode=story',
diff --git a/packages/react/src/river/River/River.visual.spec.ts-snapshots/Visual-Comparison-River-River-GridLine-visual-padding-All-1-darwin.png b/packages/react/src/river/River/River.visual.spec.ts-snapshots/Visual-Comparison-River-River-GridLine-visual-padding-All-1-darwin.png
new file mode 100644
index 0000000000..2209314cc2
Binary files /dev/null and b/packages/react/src/river/River/River.visual.spec.ts-snapshots/Visual-Comparison-River-River-GridLine-visual-padding-All-1-darwin.png differ
diff --git a/packages/react/src/river/River/River.visual.spec.ts-snapshots/Visual-Comparison-River-River-GridLine-visual-padding-None-1-darwin.png b/packages/react/src/river/River/River.visual.spec.ts-snapshots/Visual-Comparison-River-River-GridLine-visual-padding-None-1-darwin.png
new file mode 100644
index 0000000000..a9b8163a58
Binary files /dev/null and b/packages/react/src/river/River/River.visual.spec.ts-snapshots/Visual-Comparison-River-River-GridLine-visual-padding-None-1-darwin.png differ
diff --git a/packages/react/src/river/River/River.visual.spec.ts-snapshots/Visual-Comparison-River-River-GridLine-visual-position-Block-end-1-darwin.png b/packages/react/src/river/River/River.visual.spec.ts-snapshots/Visual-Comparison-River-River-GridLine-visual-position-Block-end-1-darwin.png
new file mode 100644
index 0000000000..c5c0f6d4d5
Binary files /dev/null and b/packages/react/src/river/River/River.visual.spec.ts-snapshots/Visual-Comparison-River-River-GridLine-visual-position-Block-end-1-darwin.png differ
diff --git a/packages/react/src/river/River/River.visual.spec.ts-snapshots/Visual-Comparison-River-River-GridLine-visual-position-Block-end-inline-end-1-darwin.png b/packages/react/src/river/River/River.visual.spec.ts-snapshots/Visual-Comparison-River-River-GridLine-visual-position-Block-end-inline-end-1-darwin.png
new file mode 100644
index 0000000000..f48f23d0ec
Binary files /dev/null and b/packages/react/src/river/River/River.visual.spec.ts-snapshots/Visual-Comparison-River-River-GridLine-visual-position-Block-end-inline-end-1-darwin.png differ
diff --git a/packages/react/src/river/River/River.visual.spec.ts-snapshots/Visual-Comparison-River-River-GridLine-visual-position-Block-end-inline-start-1-darwin.png b/packages/react/src/river/River/River.visual.spec.ts-snapshots/Visual-Comparison-River-River-GridLine-visual-position-Block-end-inline-start-1-darwin.png
new file mode 100644
index 0000000000..9d17d437c5
Binary files /dev/null and b/packages/react/src/river/River/River.visual.spec.ts-snapshots/Visual-Comparison-River-River-GridLine-visual-position-Block-end-inline-start-1-darwin.png differ
diff --git a/packages/react/src/river/River/River.visual.spec.ts-snapshots/Visual-Comparison-River-River-GridLine-visual-position-Center-1-darwin.png b/packages/react/src/river/River/River.visual.spec.ts-snapshots/Visual-Comparison-River-River-GridLine-visual-position-Center-1-darwin.png
new file mode 100644
index 0000000000..a5b4514a44
Binary files /dev/null and b/packages/react/src/river/River/River.visual.spec.ts-snapshots/Visual-Comparison-River-River-GridLine-visual-position-Center-1-darwin.png differ
diff --git a/packages/react/src/river/River/index.ts b/packages/react/src/river/River/index.ts
index c8725ec22e..cf1b06ed0e 100644
--- a/packages/react/src/river/River/index.ts
+++ b/packages/react/src/river/River/index.ts
@@ -1,2 +1,9 @@
-export {River, defaultRiverImageTextRatio, defaultRiverAlign, defaultRiverVariant} from './River'
-export type {RiverProps, RiverContentProps, RiverVisualProps} from './River'
+export {
+  River,
+  defaultRiverImageTextRatio,
+  defaultRiverAlign,
+  defaultRiverVariant,
+  RiverVisualPositionOptions,
+  RiverVisualPaddingOptions,
+} from './River'
+export type {RiverProps, RiverContentProps, RiverVisualProps, RiverVisualPosition, RiverVisualPadding} from './River'
diff --git a/packages/react/src/river/RiverBreakout/RiverBreakout.features.stories.tsx b/packages/react/src/river/RiverBreakout/RiverBreakout.features.stories.tsx
index 4de3eee669..8353fb1944 100644
--- a/packages/react/src/river/RiverBreakout/RiverBreakout.features.stories.tsx
+++ b/packages/react/src/river/RiverBreakout/RiverBreakout.features.stories.tsx
@@ -118,45 +118,6 @@ export const GridLine: Story = {
   ),
 }
 
-export const GridLineWithBackground: Story = {
-  name: 'GridLine variant (with background)',
-  render: () => (
-    <Section>
-      <RiverBreakout variant="gridline">
-        <RiverBreakout.A11yHeading>Accelerate workflows</RiverBreakout.A11yHeading>
-        <RiverBreakout.Visual>
-          <img src={placeholderImage} alt="placeholder, blank area with a gray background color" />
-        </RiverBreakout.Visual>
-        <RiverBreakout.Content
-          trailingComponent={() => (
-            <Stack gap="normal">
-              <Text as="p" variant="muted">
-                <Text variant="default">Deals with your issues.</Text> When assigned issues, GitHub Copilot plans,
-                writes, tests, and iterates.
-              </Text>
-              <Text as="p" variant="muted">
-                <Text variant="default">Codes like an insider.</Text> GitHub Copilot hooks into MCP servers to draw on
-                data from your repositories and external resources.
-              </Text>
-              <Text as="p" variant="muted">
-                <Text variant="default">Human and agent in the loop.</Text> Comment to guide GitHub Copilot, polish your
-                code for merge, or take over locally in your IDE.
-              </Text>
-            </Stack>
-          )}
-          trailingComponentDivider
-        >
-          <Text>
-            Accelerate your workflows and scale your business fast with access to millions of open source projects on
-            GitHub, the largest source code host.
-          </Text>
-          <Link href="#">Call to action</Link>
-        </RiverBreakout.Content>
-      </RiverBreakout>
-    </Section>
-  ),
-}
-
 export const GridLineWithCardsTrailingComponent: Story = {
   name: 'GridLine variant (cards trailing component)',
   render: () => (
diff --git a/packages/react/src/river/RiverBreakout/RiverBreakout.test.tsx b/packages/react/src/river/RiverBreakout/RiverBreakout.test.tsx
index a149a33e0a..1f394639ba 100644
--- a/packages/react/src/river/RiverBreakout/RiverBreakout.test.tsx
+++ b/packages/react/src/river/RiverBreakout/RiverBreakout.test.tsx
@@ -107,11 +107,11 @@ describe('RiverBreakout', () => {
     expect(sectionEl?.className).not.toContain('variant-gridline')
   })
 
-  it('applies the gridline variant and visual background classes when variant="gridline"', () => {
-    const {container, getByTestId} = render(
+  it('applies the gridline variant class when variant="gridline"', () => {
+    const {container} = render(
       <RiverBreakout variant="gridline">
         <RiverBreakout.A11yHeading>{mockHeading}</RiverBreakout.A11yHeading>
-        <RiverBreakout.Visual data-testid="visual-el">
+        <RiverBreakout.Visual>
           <MockImage />
         </RiverBreakout.Visual>
         <RiverBreakout.Content>
@@ -122,23 +122,6 @@ describe('RiverBreakout', () => {
 
     const sectionEl = container.querySelector('section')
     expect(sectionEl?.className).toContain('variant-gridline')
-    expect(getByTestId('visual-el')).toHaveClass('River__visual--has-background')
-  })
-
-  it('does not apply the visual background class to the default variant', () => {
-    const {getByTestId} = render(
-      <RiverBreakout>
-        <RiverBreakout.A11yHeading>{mockHeading}</RiverBreakout.A11yHeading>
-        <RiverBreakout.Visual data-testid="visual-el">
-          <MockImage />
-        </RiverBreakout.Visual>
-        <RiverBreakout.Content>
-          <Text>{mockText}</Text>
-        </RiverBreakout.Content>
-      </RiverBreakout>,
-    )
-
-    expect(getByTestId('visual-el')).not.toHaveClass('River__visual--has-background')
   })
 
   it('has no a11y violations with gridline variant', async () => {
diff --git a/packages/react/src/river/RiverBreakout/RiverBreakout.tsx b/packages/react/src/river/RiverBreakout/RiverBreakout.tsx
index 0ce43ed981..4834e61abb 100644
--- a/packages/react/src/river/RiverBreakout/RiverBreakout.tsx
+++ b/packages/react/src/river/RiverBreakout/RiverBreakout.tsx
@@ -1,7 +1,7 @@
 import React, {Ref, forwardRef} from 'react'
 import {clsx} from 'clsx'
 import {RiverProps} from '../River'
-import {Visual as RiverVisual, RiverContent, type RiverVisualProps} from '../River/River'
+import {RiverVisualBase, RiverContent, type RiverVisualBaseProps} from '../River/River'
 import {useAnimation} from '../../animation'
 import findElementInChildren from '../../findElementInChildren'
 import {Heading} from '../../Heading'
@@ -24,16 +24,6 @@ const Root = forwardRef(
   ({animate, className, children, style, variant = 'default', ...rest}: RiverBreakoutProps, ref: Ref<HTMLElement>) => {
     const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)
 
-    const Children = React.Children.map(children, child => {
-      if (React.isValidElement<RiverVisualProps>(child) && child.type === Visual) {
-        return React.cloneElement(child, {
-          className: clsx(child.props.className, variant === 'gridline' && styles['River__visual--has-background']),
-        })
-      }
-
-      return child
-    })
-
     // TODO: when Firefox supports :has() selector, we should use that instead of JS
     const defaultColor =
       findElementInChildren(children, 'b') || findElementInChildren(children, 'em') ? 'muted' : 'default'
@@ -61,7 +51,7 @@ const Root = forwardRef(
         style={{...animationInlineStyles, ...style}}
         {...rest}
       >
-        {Children}
+        {children}
       </section>
     )
   },
@@ -73,8 +63,8 @@ const A11yHeading = ({as = 'h3', children}: React.PropsWithChildren<{as?: 'h2' |
   </Heading>
 )
 
-const Visual = forwardRef<HTMLDivElement, RiverVisualProps>(({className, ...props}, ref) => (
-  <RiverVisual ref={ref} className={className} {...props} />
+const Visual = forwardRef<HTMLDivElement, RiverVisualBaseProps>(({className, ...props}, ref) => (
+  <RiverVisualBase ref={ref} className={className} {...props} />
 ))
 
 export const RiverBreakout = Object.assign(Root, {Visual, Content: RiverContent, A11yHeading})
diff --git a/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts b/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts
index 34c29985ac..128f4a806d 100644
--- a/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts
+++ b/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts
@@ -50,17 +50,6 @@ test.describe('Visual Comparison: RiverBreakout', () => {
     await expect(page).toHaveScreenshot({fullPage: true})
   })
 
-  test('RiverBreakout / GridLine variant (with background)', async ({page}) => {
-    await page.goto(
-      'http://localhost:6006/iframe.html?args=&id=components-riverbreakout-features--grid-line-with-background&viewMode=story',
-      {waitUntil: 'networkidle'},
-    )
-    await page.locator('body.sb-show-main').waitFor({state: 'visible'})
-
-    await page.waitForTimeout(500)
-    await expect(page).toHaveScreenshot({fullPage: true})
-  })
-
   test('RiverBreakout / GridLine variant (cards trailing component)', async ({page}) => {
     await page.goto(
       'http://localhost:6006/iframe.html?args=&id=components-riverbreakout-features--grid-line-with-cards-trailing-component&viewMode=story',
diff --git a/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-GridLine-variant-1-darwin.png b/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-GridLine-variant-1-darwin.png
index fdce674990..c64f5d740f 100644
Binary files a/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-GridLine-variant-1-darwin.png and b/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-GridLine-variant-1-darwin.png differ
diff --git a/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-GridLine-variant-statistics-trailing-component-1-darwin.png b/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-GridLine-variant-statistics-trailing-component-1-darwin.png
index 89e5be62c9..44b7e1ca40 100644
Binary files a/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-GridLine-variant-statistics-trailing-component-1-darwin.png and b/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-GridLine-variant-statistics-trailing-component-1-darwin.png differ
diff --git a/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-GridLine-variant-with-background-1-darwin.png b/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-GridLine-variant-with-background-1-darwin.png
deleted file mode 100644
index 6b1b3cbd22..0000000000
Binary files a/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-GridLine-variant-with-background-1-darwin.png and /dev/null differ
diff --git a/packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.module.css b/packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.module.css
index 6678f36d58..5769ac4141 100644
--- a/packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.module.css
+++ b/packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.module.css
@@ -37,15 +37,6 @@
   border-radius: var(--brand-borderRadius-small);
 }
 
-/* River removes the gridline top spacing when a subtle visual is present
-   (.RiverBreakout--variant-gridline:has(.River__visual--has-background)), bleeding the subtle
-   background up to the top gridline. Restore the top spacing so a non-full-bleed background is
-   inset from the top like the sides — only backgroundVisualFullBleed should reach the
-   top gridline. */
-.RiverBreakoutTabs:has(:global([class*='River__visual--has-background'])) {
-  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);
-}
-
 .RiverBreakoutTabs__accordionSharedVisuals {
   position: relative;
   margin-block-end: var(--base-size-16);
diff --git a/packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.test.tsx b/packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.test.tsx
index 28f4dc619f..ba61f6deaf 100644
--- a/packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.test.tsx
+++ b/packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.test.tsx
@@ -86,7 +86,7 @@ describe('RiverBreakoutTabs', () => {
     expect(getByRole('tabpanel')).toHaveAttribute('id', tabs[1].getAttribute('aria-controls'))
   })
 
-  it('does not apply the removed visual background treatment by default', () => {
+  it('does not apply a visual background by default', () => {
     const {getAllByTestId} = render(
       <RiverBreakoutTabs>
         <RiverBreakoutTabs.A11yHeading>Agent workflows</RiverBreakoutTabs.A11yHeading>
diff --git a/packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx b/packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx
index 15476b58d6..5f5c5966b6 100644
--- a/packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx
+++ b/packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx
@@ -3,7 +3,7 @@ import {clsx} from 'clsx'
 
 import {Accordion, Heading, Link, Text, type HeadingProps} from '../..'
 import {Icon, type IconProps} from '../../Icon'
-import {Visual as RiverVisual, type RiverVisualProps} from '../River/River'
+import {RiverVisualBase, type RiverVisualBaseProps} from '../River/River'
 import {useId} from '../../hooks/useId'
 import {useTabs} from '../../hooks/useTabs'
 import {useWindowSize} from '../../hooks/useWindowSize'
@@ -59,7 +59,7 @@ export type RiverBreakoutTabsContentProps = React.HTMLAttributes<HTMLDivElement>
 
 export type RiverBreakoutTabsIconProps = IconProps
 
-export type RiverBreakoutTabsVisualProps = RiverVisualProps
+export type RiverBreakoutTabsVisualProps = RiverVisualBaseProps
 
 type RiverBreakoutTabsItemChild =
   | React.ReactElement<RiverBreakoutTabsIconProps>
@@ -143,7 +143,7 @@ const RiverBreakoutTabsContent = ({children, className, ...props}: RiverBreakout
 }
 
 const RiverBreakoutTabsVisual = forwardRef<HTMLDivElement, RiverBreakoutTabsVisualProps>(
-  ({className, ...props}, ref) => <RiverVisual ref={ref} className={className} {...props} />,
+  ({className, ...props}, ref) => <RiverVisualBase ref={ref} className={className} {...props} />,
 )
 
 const isItem = createComponentTypeGuard(RiverBreakoutTabsItem)
@@ -429,7 +429,7 @@ const RiverBreakoutTabsRoot = forwardRef<HTMLElement, RiverBreakoutTabsProps>(
                     tabIndex={-1}
                     className={styles.RiverBreakoutTabs__sharedVisualPanel}
                   >
-                    {cloneElement(item.visual as React.ReactElement<RiverVisualProps>, {
+                    {cloneElement(item.visual as React.ReactElement<RiverBreakoutTabsVisualProps>, {
                       className: clsx(item.visual?.props.className, styles.RiverBreakoutTabs__sharedVisual),
                     })}
                   </div>
@@ -462,7 +462,7 @@ const RiverBreakoutTabsRoot = forwardRef<HTMLElement, RiverBreakoutTabsProps>(
             {activeAccordionIndex >= 0 && Items[activeAccordionIndex]?.visual && (
               <div className={styles.RiverBreakoutTabs__accordionSharedVisuals}>
                 {BackgroundVisualLayer}
-                {cloneElement(Items[activeAccordionIndex].visual as React.ReactElement<RiverVisualProps>, {
+                {cloneElement(Items[activeAccordionIndex].visual as React.ReactElement<RiverBreakoutTabsVisualProps>, {
                   className: clsx(
                     Items[activeAccordionIndex].visual.props.className,
                     styles.RiverBreakoutTabs__accordionSharedVisual,
diff --git a/packages/react/src/river/river-shared.module.css b/packages/react/src/river/river-shared.module.css
index 02841706ab..b80137b198 100644
--- a/packages/react/src/river/river-shared.module.css
+++ b/packages/react/src/river/river-shared.module.css
@@ -56,7 +56,7 @@
   align-items: center;
   justify-content: center;
   background-color: var(--brand-color-canvas-subtle);
-  padding: var(--base-size-32);
+  padding: var(--brand-River-variant-gridline-visual-padding);
   border-radius: 0;
   margin-inline: calc(-1 * var(--brand-River-variant-gridline-spacing-outerInline));
 }
@@ -204,7 +204,6 @@
   }
 
   .River--variant-gridline .River__visual--has-background {
-    padding: var(--base-size-64);
     margin: 0;
   }
 
@@ -377,6 +376,123 @@
   }
 }
 
+/* Explicit visual media layouts override the responsive default without changing it. */
+.River--variant-gridline .River__visual.River__visual--position-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--brand-River-variant-gridline-visual-padding);
+  border-radius: 0;
+}
+
+.River--variant-gridline .River__visual.River__visual--position-block-end {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding: var(--brand-River-variant-gridline-visual-padding);
+  padding-block-end: 0;
+  border-radius: 0;
+}
+
+.River--variant-gridline .River__visual.River__visual--position-block-end-inline-start {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-start;
+  padding: var(--brand-River-variant-gridline-visual-padding);
+  padding-block-end: 0;
+  padding-inline-start: 0;
+  border-radius: 0;
+}
+
+.River--variant-gridline .River__visual.River__visual--position-block-end-inline-end {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: var(--brand-River-variant-gridline-visual-padding);
+  padding-block-end: 0;
+  padding-inline-end: 0;
+  border-radius: 0;
+}
+
+.River--variant-gridline .River__visual.River__visual--padding-all {
+  padding: var(--brand-River-variant-gridline-visual-padding);
+}
+
+.River--variant-gridline .River__visual.River__visual--padding-none {
+  padding: 0;
+  border-radius: 0;
+}
+
+.River--variant-gridline
+  .River__visual:is(
+    .River__visual--position-center,
+    .River__visual--position-block-end,
+    .River__visual--position-block-end-inline-start,
+    .River__visual--position-block-end-inline-end
+  )
+  :is(img, picture, video, [data-video-player-container]) {
+  max-width: 100%;
+  width: auto;
+  height: auto;
+  border-radius: 0;
+}
+
+.River--variant-gridline
+  .River__visual.River__visual--padding-all
+  :is(img, picture, video, [data-video-player-container]) {
+  border-radius: 0;
+}
+
+.River--variant-gridline
+  .River__visual.River__visual--rounded.River__visual--position-center
+  :is(img, picture, video, [data-video-player-container]) {
+  border-radius: var(--brand-borderRadius-large);
+}
+
+.River--variant-gridline
+  .River__visual.River__visual--rounded.River__visual--position-block-end
+  :is(img, picture, video, [data-video-player-container]) {
+  border-radius: var(--brand-borderRadius-large) var(--brand-borderRadius-large) 0 0;
+}
+
+.River--variant-gridline
+  .River__visual.River__visual--rounded.River__visual--position-block-end-inline-start
+  :is(img, picture, video, [data-video-player-container]) {
+  border-radius: 0;
+  border-start-end-radius: var(--brand-borderRadius-large);
+}
+
+.River--variant-gridline
+  .River__visual.River__visual--rounded.River__visual--position-block-end-inline-end
+  :is(img, picture, video, [data-video-player-container]) {
+  border-radius: 0;
+  border-start-start-radius: var(--brand-borderRadius-large);
+}
+
+.River--variant-gridline
+  .River__visual.River__visual--rounded.River__visual--padding-all
+  :is(img, picture, video, [data-video-player-container]) {
+  border-radius: var(--brand-borderRadius-large);
+}
+
+.River--variant-gridline
+  .River__visual.River__visual--fill-media.River__visual--padding-none
+  :is(img, picture, video, [data-video-player-container]) {
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  object-fit: cover;
+}
+
+.River--variant-gridline
+  .River__visual.River__visual--padding-none
+  :is(img, picture, video, [data-video-player-container]),
+.River--variant-gridline
+  .River__visual.River__visual--rounded.River__visual--padding-none
+  :is(img, picture, video, [data-video-player-container]) {
+  border-radius: 0;
+}
+
 .RiverBreakout {
   display: flex;
   flex-direction: column;
@@ -565,97 +681,3 @@
     align-self: stretch;
   }
 }
-
-/* Gridline + background: remove outer container top padding (background fills to top edge) */
-.RiverBreakout--variant-gridline:has(.River__visual--has-background) {
-  padding-block-start: 0;
-}
-
-.RiverBreakout .River__visual--has-background {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--brand-color-canvas-subtle);
-  border-radius: 0;
-  overflow: hidden;
-}
-
-.RiverBreakout .River__visual--has-background img,
-.RiverBreakout .River__visual--has-background picture,
-.RiverBreakout .River__visual--has-background video {
-  max-width: 100%;
-  height: auto;
-  width: auto;
-  border-radius: var(--brand-borderRadius-large);
-}
-
-.RiverBreakout .River__visual--has-background [data-video-player-container] {
-  border-radius: var(--brand-borderRadius-large);
-}
-
-.RiverBreakout--variant-gridline .River__visual--has-background {
-  margin-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));
-  padding: var(--base-size-32);
-}
-
-@media screen and (max-width: 47.99rem) {
-  .RiverBreakout--variant-gridline .River__visual--has-background {
-    align-items: flex-end;
-    padding-block-end: 0;
-  }
-
-  .RiverBreakout--variant-gridline .River__visual--has-background img,
-  .RiverBreakout--variant-gridline .River__visual--has-background picture,
-  .RiverBreakout--variant-gridline .River__visual--has-background video {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
-  }
-}
-
-@media screen and (min-width: 48rem) and (max-width: 63.24rem) {
-  .RiverBreakout--variant-gridline .River__visual--has-background {
-    align-items: flex-end;
-    padding-block-end: 0;
-  }
-
-  .RiverBreakout--variant-gridline .River__visual--has-background img,
-  .RiverBreakout--variant-gridline .River__visual--has-background picture,
-  .RiverBreakout--variant-gridline .River__visual--has-background video {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
-  }
-}
-
-@media screen and (min-width: 63.25rem) {
-  .RiverBreakout--variant-gridline .River__visual--has-background {
-    align-items: flex-end;
-    padding: var(--base-size-64);
-    padding-block-end: 0;
-  }
-
-  .RiverBreakout--variant-gridline .River__visual--has-background img,
-  .RiverBreakout--variant-gridline .River__visual--has-background picture,
-  .RiverBreakout--variant-gridline .River__visual--has-background video {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  .RiverBreakout--variant-gridline .River__visual--has-background.River__visual--rounded {
-    border-radius: 0;
-  }
-}
diff --git a/packages/react/src/river/river-shared.module.css.d.ts b/packages/react/src/river/river-shared.module.css.d.ts
index 22b2970bfa..503bbf5e50 100644
--- a/packages/react/src/river/river-shared.module.css.d.ts
+++ b/packages/react/src/river/river-shared.module.css.d.ts
@@ -24,6 +24,12 @@ declare const styles: {
   readonly "River__visual--fill-media": string;
   readonly "River__visual--has-background": string;
   readonly "River__visual--has-shadow": string;
+  readonly "River__visual--padding-all": string;
+  readonly "River__visual--padding-none": string;
+  readonly "River__visual--position-block-end": string;
+  readonly "River__visual--position-block-end-inline-end": string;
+  readonly "River__visual--position-block-end-inline-start": string;
+  readonly "River__visual--position-center": string;
   readonly "River__visual--rounded": string;
 };
 export = styles;