diff --git a/.changeset/mosaic-section-frame.md b/.changeset/mosaic-section-frame.md
new file mode 100644
index 00000000000..d4f80eee106
--- /dev/null
+++ b/.changeset/mosaic-section-frame.md
@@ -0,0 +1,5 @@
+---
+'@clerk/mosaic': minor
+---
+
+New `Section.Frame` and `Section.Footer` parts wrap a section card and a footer strip in one faded shell, with a single outer edge and nothing drawn between the card and the footer.
diff --git a/packages/mosaic/src/components/section/section.styles.ts b/packages/mosaic/src/components/section/section.styles.ts
index 0904539df9f..cdffeb53dee 100644
--- a/packages/mosaic/src/components/section/section.styles.ts
+++ b/packages/mosaic/src/components/section/section.styles.ts
@@ -54,6 +54,29 @@ export const styles = stylex.create({
     flexDirection: 'column',
     width: 'auto',
   },
+  frame: {
+    padding: '1px',
+    borderRadius: radiusVars['--cl-radius-xl'],
+    backgroundColor: colorVars['--cl-color-surface-subtle'],
+    display: 'flex',
+    flexDirection: 'column',
+    width: 'auto',
+  },
+  framedBody: {
+    borderRadius: 'inherit',
+    borderWidth: '0px',
+  },
+  footer: {
+    paddingBlock: space['3'],
+    paddingInline: space['4'],
+    alignItems: 'center',
+    color: colorVars['--cl-color-foreground-secondary'],
+    columnGap: space['3'],
+    display: 'flex',
+    fontSize: typeScaleVars['--cl-text-sm-size'],
+    justifyContent: 'space-between',
+    lineHeight: typeScaleVars['--cl-text-sm-leading'],
+  },
   row: {
     paddingBlock: space['4'],
     borderBlockStartColor: colorVars['--cl-color-border'],
diff --git a/packages/mosaic/src/components/section/section.test.tsx b/packages/mosaic/src/components/section/section.test.tsx
index c1c29f54768..5248e5ef11e 100644
--- a/packages/mosaic/src/components/section/section.test.tsx
+++ b/packages/mosaic/src/components/section/section.test.tsx
@@ -392,6 +392,24 @@ describe('Section', () => {
     expect(note.parentElement).toBe(screen.getByTestId('item'));
   });
 
+  it('renders a frame with its theme class', () => {
+    render(
+      <Section.Frame data-testid='frame'>
+        <Section.Body data-testid='body' />
+      </Section.Frame>,
+    );
+
+    expect(screen.getByTestId('frame')).toHaveClass('cl-section-frame');
+    expect(screen.getByTestId('frame')).toContainElement(screen.getByTestId('body'));
+  });
+
+  it('renders a footer with its theme class', () => {
+    render(<Section.Footer data-testid='footer'>Changing plans</Section.Footer>);
+
+    expect(screen.getByTestId('footer')).toHaveClass('cl-section-footer');
+    expect(screen.getByTestId('footer')).toHaveTextContent('Changing plans');
+  });
+
   it('leaves out the glyph slot when the note carries no icon', () => {
     render(<Section.Note data-testid='note'>Managed by Acme SSO</Section.Note>);
 
diff --git a/packages/mosaic/src/components/section/section.tsx b/packages/mosaic/src/components/section/section.tsx
index e3435143c62..331c5f3d99d 100644
--- a/packages/mosaic/src/components/section/section.tsx
+++ b/packages/mosaic/src/components/section/section.tsx
@@ -22,6 +22,8 @@ export type SectionGroupProps = MosaicComponentProps<'div'>;
 export type SectionHeaderProps = MosaicComponentProps<'div'>;
 export type SectionTitleProps = Omit<HeadingProps, 'size'>;
 export type SectionBodyProps = MosaicComponentProps<'div'>;
+export type SectionFrameProps = MosaicComponentProps<'div'>;
+export type SectionFooterProps = MosaicComponentProps<'div'>;
 export type SectionRowProps = MosaicComponentProps<'div'>;
 export type SectionItemsProps = MosaicComponentProps<'ul'>;
 export type SectionItemProps = MosaicComponentProps<'div'> & { wrap?: boolean };
@@ -45,6 +47,7 @@ const SectionGroupContext = React.createContext<React.Dispatch<React.SetStateAct
 const SectionHeaderContext = React.createContext(false);
 const SectionItemsContext = React.createContext(false);
 const SectionItemWrapContext = React.createContext(false);
+const SectionFrameContext = React.createContext(false);
 
 const Root = React.forwardRef<HTMLElement, SectionRootProps>(function SectionRoot({ render, xstyle, ...rest }, ref) {
   return useRender({
@@ -121,11 +124,52 @@ const Title = React.forwardRef<HTMLHeadingElement, SectionTitleProps>(function S
 });
 
 const Body = React.forwardRef<HTMLDivElement, SectionBodyProps>(function SectionBody({ render, xstyle, ...rest }, ref) {
+  const framed = React.useContext(SectionFrameContext);
+
+  return useRender({
+    defaultTagName: 'div',
+    render,
+    ref,
+    props: mergeStyleProps(
+      themeProps('section-body'),
+      stylex.props(reset.base, styles.body, framed && styles.framedBody, xstyle),
+      rest,
+    ),
+  });
+});
+
+/**
+ * Wraps a `Section.Body` and a `Section.Footer` in one faded shell. The shell's color shows around
+ * the body as its outline and behind the footer, so the pair has a single outer edge and nothing
+ * drawn between them.
+ */
+const Frame = React.forwardRef<HTMLDivElement, SectionFrameProps>(function SectionFrame(
+  { render, xstyle, ...rest },
+  ref,
+) {
+  const element = useRender({
+    defaultTagName: 'div',
+    render,
+    ref,
+    props: mergeStyleProps(themeProps('section-frame'), stylex.props(reset.base, styles.frame, xstyle), rest),
+  });
+
+  return <SectionFrameContext.Provider value>{element}</SectionFrameContext.Provider>;
+});
+
+/**
+ * A strip under `Section.Body` for a summary or a link that belongs to the card above it. Place it
+ * directly after `Section.Body` inside a `Section.Frame`.
+ */
+const Footer = React.forwardRef<HTMLDivElement, SectionFooterProps>(function SectionFooter(
+  { render, xstyle, ...rest },
+  ref,
+) {
   return useRender({
     defaultTagName: 'div',
     render,
     ref,
-    props: mergeStyleProps(themeProps('section-body'), stylex.props(reset.base, styles.body, xstyle), rest),
+    props: mergeStyleProps(themeProps('section-footer'), stylex.props(reset.base, styles.footer, xstyle), rest),
   });
 });
 
@@ -358,6 +402,8 @@ export const Section = {
   Header,
   Title,
   Body,
+  Frame,
+  Footer,
   Row,
   Items,
   Item,
diff --git a/packages/swingset/src/stories/section.mdx b/packages/swingset/src/stories/section.mdx
index 46fe68be47a..0ff9cba9888 100644
--- a/packages/swingset/src/stories/section.mdx
+++ b/packages/swingset/src/stories/section.mdx
@@ -71,6 +71,8 @@ title. See [Panel](/components/panel) and [Heading](/components/heading).
 | `Section.Header`      | `<div>`     | `.cl-section-header`      | Content and optional actions.                                   |
 | `Section.Title`       | heading     | `.cl-section-title`       | The group's heading.                                            |
 | `Section.Body`        | `<div>`     | `.cl-section-body`        | The card under the header.                                      |
+| `Section.Frame`       | `<div>`     | `.cl-section-frame`       | Faded shell around a body and a footer.                         |
+| `Section.Footer`      | `<div>`     | `.cl-section-footer`      | A strip under the body, on the frame.                           |
 | `Section.Row`         | `<div>`     | `.cl-section-row`         | One setting.                                                    |
 | `Section.Items`       | `<ul>`      | `.cl-section-items`       | A list of values.                                               |
 | `Section.Item`        | `<div>`     | `.cl-section-item`        | Media, content, and actions on one line. `<li>` inside `Items`. |
@@ -102,6 +104,15 @@ inside `Section.Items` reflect `data-nested`.
   storyModule={SectionStories}
 />
 
+### Footer
+
+`Section.Frame` wraps a `Section.Body` and a `Section.Footer` in a shell of `--cl-color-surface-subtle`. The shell's color shows as a one-pixel outline around the body and behind the footer, so the pair has one outer edge and no line between them.
+
+<Story
+  name='Subscription'
+  storyModule={SectionStories}
+/>
+
 ### Header description
 
 <Story
diff --git a/packages/swingset/src/stories/section.stories.tsx b/packages/swingset/src/stories/section.stories.tsx
index aae2acd0dee..81d8b6d9775 100644
--- a/packages/swingset/src/stories/section.stories.tsx
+++ b/packages/swingset/src/stories/section.stories.tsx
@@ -7,6 +7,7 @@ import { Section } from '@clerk/mosaic/components/section';
 import { Skeleton } from '@clerk/mosaic/components/skeleton';
 import { VisuallyHidden } from '@clerk/mosaic/components/visually-hidden';
 import { ArrowUpRight } from '@clerk/mosaic/icons/glyphs/arrow-up-right';
+import { Calendar } from '@clerk/mosaic/icons/glyphs/calendar';
 import { DeviceLaptop } from '@clerk/mosaic/icons/glyphs/device-laptop';
 import { DevicePhone } from '@clerk/mosaic/icons/glyphs/device-phone';
 import { EllipsisHorizontal } from '@clerk/mosaic/icons/glyphs/ellipsis-horizontal';
@@ -432,6 +433,65 @@ export function Destructive() {
   );
 }
 
+export function Subscription() {
+  return (
+    <Section.Root xstyle={styles.rootMax}>
+      <Section.Group>
+        <Section.Header>
+          <Section.Content>
+            <Section.Title>Subscription</Section.Title>
+          </Section.Content>
+        </Section.Header>
+        <Section.Frame>
+          <Section.Body>
+            <Section.Row>
+              <Section.Item>
+                <Section.Content>
+                  <Section.Label>
+                    Basic <Badge color='neutral'>Ends Oct 22</Badge>
+                  </Section.Label>
+                  <Section.Description>$12 / month</Section.Description>
+                </Section.Content>
+                <Section.Actions>
+                  <Button
+                    color='neutral'
+                    size='sm'
+                    variant='outline'
+                  >
+                    Change plan
+                  </Button>
+                </Section.Actions>
+              </Section.Item>
+            </Section.Row>
+            <Section.Row>
+              <Section.Item>
+                <Section.Content>
+                  <Section.Label>Next invoice</Section.Label>
+                  <Section.Description>Due October 22, 2026</Section.Description>
+                </Section.Content>
+                <Section.Actions>$199.00</Section.Actions>
+              </Section.Item>
+            </Section.Row>
+          </Section.Body>
+          <Section.Footer>
+            <span style={{ alignItems: 'center', display: 'inline-flex', gap: 8 }}>
+              <Icon glyph={Calendar} />
+              Changing to the Basic plan on October 22, 2026
+            </span>
+            <Button
+              color='neutral'
+              size='sm'
+              variant='ghost'
+            >
+              View details
+            </Button>
+          </Section.Footer>
+        </Section.Frame>
+      </Section.Group>
+    </Section.Root>
+  );
+}
+
 export function ContainedHeader() {
   return (
     <>