diff --git a/components/src/Breakout/Breakout.stories.svelte b/components/src/Breakout/Breakout.stories.svelte
index 690bedd..800d763 100644
--- a/components/src/Breakout/Breakout.stories.svelte
+++ b/components/src/Breakout/Breakout.stories.svelte
@@ -24,6 +24,9 @@
 	>
 		<DesignTokens>
 			<div class="demo">
+				<Breakout layout="small">
+					<div class="chart">small</div>
+				</Breakout>
 				<Breakout layout="medium">
 					<div class="chart">medium</div>
 				</Breakout>
diff --git a/components/src/Breakout/Breakout.svelte b/components/src/Breakout/Breakout.svelte
index 7323bb3..2f285d4 100644
--- a/components/src/Breakout/Breakout.svelte
+++ b/components/src/Breakout/Breakout.svelte
@@ -2,7 +2,7 @@
 	import type { Snippet } from 'svelte';
 
 	interface BreakoutProps {
-		layout: 'medium' | 'large' | 'bleed';
+		layout: 'small' | 'medium' | 'large' | 'bleed';
 		children?: Snippet;
 	}
 	let { layout = 'medium', children }: BreakoutProps = $props();
@@ -35,6 +35,19 @@
 		}
 	}
 
+	.small {
+		width: calc(var(--column-width) * 10 + var(--column-gap) * 8);
+		margin-left: calc((var(--column-width) * 1) + (var(--column-gap)) * 1);
+		@media (min-width: 640px) {
+			width: calc(var(--column-width) * 8 + var(--column-gap) * 6);
+			margin-left: calc((var(--column-width) * 1) + (var(--column-gap)) * 1);
+		}
+		@media (min-width: 1024px) {
+			width: calc(var(--column-width) * 6 + var(--column-gap) * 5);
+			margin-left: calc((var(--column-width) * 1) + (var(--column-gap)) * 1);
+		}
+	}
+
 	.medium {
 		@media (min-width: 1024px) {
 			width: calc(var(--column-width) * 10 + var(--column-gap) * 9);