diff --git a/src/banner/banner.module.css b/src/banner/banner.module.css
index 64d4322e..ae7d7dc9 100644
--- a/src/banner/banner.module.css
+++ b/src/banner/banner.module.css
@@ -32,6 +32,7 @@
 
 .content {
     padding: var(--reactist-spacing-large);
+    align-items: flex-start;
 }
 
 .title,
@@ -74,24 +75,29 @@
 
 .copy {
     padding: calc(var(--reactist-spacing-xsmall) / 2) 0;
+    flex: 1 1 auto;
 }
 .copy .inlineLink:first-of-type {
     margin-left: var(--reactist-spacing-xsmall);
 }
+.actions {
+    align-self: center;
+}
 
 @container banner (width < 235px) {
-    .content,
-    .staticContent {
+    .content {
         flex-direction: column;
-        align-items: flex-start;
     }
-
     .icon {
         display: flex;
         width: 100%;
         align-items: center;
         justify-content: space-between;
     }
+    .topContent {
+        flex-direction: column;
+        align-items: stretch;
+    }
     .icon:has(.closeButton:only-child) {
         display: flex;
     }
@@ -101,7 +107,9 @@
     .icon .closeButton:only-child {
         margin-left: auto;
     }
-
+    .actions {
+        align-self: flex-start;
+    }
     .actions .closeButton {
         display: none;
     }
diff --git a/src/banner/banner.stories.mdx b/src/banner/banner.stories.mdx
index 15bd8548..64716961 100644
--- a/src/banner/banner.stories.mdx
+++ b/src/banner/banner.stories.mdx
@@ -5,6 +5,8 @@ import { Stack } from '../stack'
 import { Banner } from './banner'
 import { Button } from '../button'
 import { PromoImage } from './story-promo-image'
+import { Notice } from '../notice'
+import { CheckboxField } from '../checkbox-field'
 
 <Meta
     title="Design system/Banner"
@@ -35,6 +37,10 @@ export function getButton(buttonText) {
     )
 }
 
+export function getLongDescription() {
+    return 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident cumque recusandae quibusdam, veniam cum illo? Inventore, doloremque necessitatibus! Sequi porro alias mollitia, temporibus quidem, aut modi tempora placeat laborum eos sapiente necessitatibus autem ipsum officia rerum distinctio consectetur tenetur qui! Perspiciatis ab corporis, itaque alias ex optio voluptatum nulla consequatur aut explicabo dolorem rerum ratione magnam. Mollitia dignissimos et ad commodi quasi molestias fugiat repellendus, magni distinctio voluptate neque quos esse asperiores iure excepturi eligendi eaque veniam voluptas blanditiis temporibus, omnis laborum quidem autem totam. Iure, numquam. Totam facilis dolorum, consequatur, eligendi est dolores modi dolore maiores ipsum magnam a.'
+}
+
 export function PlaygroundTemplate({ type, title, description, action }) {
     return (
         <Stack space="large" maxWidth="medium">
@@ -168,6 +174,29 @@ export function BannerActionExamples({ theme }) {
                     }}
                     onClose={() => ({})}
                 />
+                <Banner
+                    type="neutral"
+                    icon={<ArchiveIcon />}
+                    title="This is a sample title"
+                    description={getLongDescription()}
+                    action={{
+                        type: 'button',
+                        label: 'Action',
+                        variant: 'primary',
+                    }}
+                />
+                <Banner
+                    type="neutral"
+                    icon={<ArchiveIcon />}
+                    title="This is a sample title"
+                    description={getLongDescription()}
+                    action={{
+                        type: 'button',
+                        label: 'Action',
+                        variant: 'primary',
+                    }}
+                    onClose={() => ({})}
+                />
             </Stack>
         </Stack>
     )
@@ -230,6 +259,102 @@ export function BannerImageExamples({ theme }) {
     )
 }
 
+export function BannerContentExamples({ theme }) {
+    return (
+        <Stack space="medium" align="start">
+            <Stack space="large">
+                <Banner
+                    type="neutral"
+                    title="This is a sample title"
+                    description="Here’s the message below the title, sometimes the copy spans over two lines."
+                >
+                    <Text tone="secondary">Some extra content here</Text>
+                </Banner>
+                <Banner
+                    type="neutral"
+                    title="This is a sample title"
+                    description="Here’s the message below the title, sometimes the copy spans over two lines."
+                    action={getButton('Click me!')}
+                >
+                    <Text tone="secondary">Some extra content here</Text>
+                </Banner>
+                <Banner
+                    type="neutral"
+                    title="This is a sample title"
+                    description="Here’s the message below the title, sometimes the copy spans over two lines."
+                    action={getButton('Click me!')}
+                    onClose={() => ({})}
+                >
+                    <Text tone="secondary">Some extra content here</Text>
+                </Banner>
+                <Banner
+                    type="neutral"
+                    title="This is a sample title"
+                    description="Here’s the message below the title, sometimes the copy spans over two lines."
+                    icon={<ArchiveIcon />}
+                >
+                    <Text tone="secondary">Some extra content here</Text>
+                </Banner>
+                <Banner
+                    type="neutral"
+                    title="This is a sample title"
+                    description="Here’s the message below the title, sometimes the copy spans over two lines."
+                    inlineLinks={[{ label: 'Learn more', href: '#' }]}
+                    icon={<ArchiveIcon />}
+                    action={getButton('Click me!')}
+                >
+                    <Text tone="secondary">Some extra content here</Text>
+                </Banner>
+                <Banner
+                    type="neutral"
+                    title="This is a sample title"
+                    description="Here’s the message below the title, sometimes the copy spans over two lines."
+                    inlineLinks={[{ label: 'Learn more', href: '#' }]}
+                    icon={<ArchiveIcon />}
+                    action={getButton('Click me!')}
+                >
+                    <Stack space="large">
+                        <Text tone="secondary">Some extra content here</Text>
+                    </Stack>
+                </Banner>
+                <Banner
+                    type="neutral"
+                    title="This is a sample title"
+                    description={getLongDescription()}
+                    inlineLinks={[{ label: 'Learn more', href: '#' }]}
+                    icon={<ArchiveIcon />}
+                    action={getButton('Click me!')}
+                >
+                    <Stack space="large">
+                        <Text tone="secondary">{getLongDescription()}</Text>
+                        <Notice tone="info">
+                            <Text>Please check the box to continue.</Text>
+                        </Notice>
+                        <CheckboxField label="Check me!" />
+                    </Stack>
+                </Banner>
+                <Banner
+                    type="neutral"
+                    title="This is a sample title"
+                    description={getLongDescription()}
+                    inlineLinks={[{ label: 'Learn more', href: '#' }]}
+                    icon={<ArchiveIcon />}
+                    action={getButton('Click me!')}
+                    onClose={() => ({})}
+                >
+                    <Stack space="large">
+                        <Text tone="secondary">{getLongDescription()}</Text>
+                        <Notice tone="info">
+                            <Text>Please check the box to continue.</Text>
+                        </Notice>
+                        <CheckboxField label="Check me!" />
+                    </Stack>
+                </Banner>
+            </Stack>
+        </Stack>
+    )
+}
+
 # Banner
 
 A simple banner component meant to be used to _inform_ the user of promotional content, disclaimers, warnings, as well as success and error states.
@@ -340,6 +465,22 @@ Image banners do not feature icons but can include body text or a combination of
     </Story>
 </Canvas>
 
+### Content
+
+Banners can include extra content.
+
+<Canvas>
+    <Story
+        name="Content"
+        parameters={{
+            docs: { source: { type: 'code' } },
+            chromatic: { disableSnapshot: false },
+        }}
+    >
+        <BannerContentExamples theme="light" />
+    </Story>
+</Canvas>
+
 ## Props
 
 <ArgsTable of={Banner} />
diff --git a/src/banner/banner.test.tsx b/src/banner/banner.test.tsx
index ae39ccfb..dd33c318 100644
--- a/src/banner/banner.test.tsx
+++ b/src/banner/banner.test.tsx
@@ -245,4 +245,13 @@ describe('Banner', () => {
         const results = await axe(container)
         expect(results).toHaveNoViolations()
     })
+
+    it('renders a banner with children', () => {
+        render(
+            <Banner type="info" description="Info">
+                <p>Child content</p>
+            </Banner>,
+        )
+        expect(screen.getByText('Child content')).toBeInTheDocument()
+    })
 })
diff --git a/src/banner/banner.tsx b/src/banner/banner.tsx
index 103342c2..70464310 100644
--- a/src/banner/banner.tsx
+++ b/src/banner/banner.tsx
@@ -66,6 +66,7 @@ type BaseBanner = {
     id?: string
     title?: React.ReactNode
     description: Exclude<React.ReactNode, null | undefined | boolean>
+    children?: React.ReactNode
     action?: Action | React.ReactNode
     inlineLinks?: InlineLink[]
 } & CloseButton
@@ -112,6 +113,7 @@ const Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(
         type,
         title,
         description,
+        children,
         action,
         icon,
         image,
@@ -153,57 +155,71 @@ const Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(
         >
             {image ? <Box className={styles.image}>{image}</Box> : null}
 
-            <Box className={styles.content} display="flex" gap="small" alignItems="center">
-                <Box className={styles.staticContent} display="flex" gap="small" flexGrow={1}>
-                    <Box className={styles.icon}>
-                        {type === 'neutral' ? icon : <BannerIcon type={type} />}
-                        {closeButton}
-                    </Box>
+            <Box className={styles.content} display="flex" gap="small">
+                <Box className={styles.icon}>
+                    {type === 'neutral' ? icon : <BannerIcon type={type} />}
+                    {closeButton}
+                </Box>
 
-                    <Box className={styles.copy} display="flex" flexDirection="column">
-                        {title ? (
-                            <Box id={titleId} className={styles.title}>
-                                {title}
-                            </Box>
-                        ) : null}
+                <Box display="flex" flexDirection="column" gap="small" flexGrow={1}>
+                    <Box
+                        className={styles.topContent}
+                        display="flex"
+                        gap="small"
+                        alignItems="flexStart"
+                    >
                         <Box
-                            id={descriptionId}
-                            className={[styles.description, title ? styles.secondary : null]}
+                            className={styles.copy}
+                            display="flex"
+                            flexDirection="column"
+                            flexGrow={1}
                         >
-                            {description}
-                            {inlineLinks?.map(({ label, ...props }, index) => {
-                                return (
-                                    <React.Fragment key={index}>
-                                        <TextLink
-                                            {...props}
-                                            exceptionallySetClassName={styles.inlineLink}
-                                        >
-                                            {label}
-                                        </TextLink>
-                                        {index < inlineLinks.length - 1 ? <span> · </span> : ''}
-                                    </React.Fragment>
-                                )
-                            })}
+                            {title ? (
+                                <Box id={titleId} className={styles.title}>
+                                    {title}
+                                </Box>
+                            ) : null}
+                            <Box
+                                id={descriptionId}
+                                className={[styles.description, title ? styles.secondary : null]}
+                            >
+                                {description}
+                                {inlineLinks?.map(({ label, ...props }, index) => {
+                                    return (
+                                        <React.Fragment key={index}>
+                                            <TextLink
+                                                {...props}
+                                                exceptionallySetClassName={styles.inlineLink}
+                                            >
+                                                {label}
+                                            </TextLink>
+                                            {index < inlineLinks.length - 1 ? <span> · </span> : ''}
+                                        </React.Fragment>
+                                    )
+                                })}
+                            </Box>
                         </Box>
-                    </Box>
-                </Box>
 
-                {action || closeButton ? (
-                    <Box className={styles.actions} display="flex" gap="small">
-                        {action ? (
-                            isActionObject(action) ? (
-                                action.type === 'button' ? (
-                                    <ActionButton {...action} />
-                                ) : (
-                                    <ActionLink {...action} />
-                                )
-                            ) : (
-                                action
-                            )
+                        {action || closeButton ? (
+                            <Box className={styles.actions} display="flex" gap="small">
+                                {action ? (
+                                    isActionObject(action) ? (
+                                        action.type === 'button' ? (
+                                            <ActionButton {...action} />
+                                        ) : (
+                                            <ActionLink {...action} />
+                                        )
+                                    ) : (
+                                        action
+                                    )
+                                ) : null}
+                                {closeButton}
+                            </Box>
                         ) : null}
-                        {closeButton}
                     </Box>
-                ) : null}
+
+                    {children}
+                </Box>
             </Box>
         </Box>
     )