From 3d37d3eba01c39dc416ec0c1a1ef623acf62e92f Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 28 Jan 2026 12:06:28 +0100
Subject: [PATCH 1/2] Build out feature

---
 components/src/Breakout/Breakout.stories.svelte |  3 +++
 components/src/Breakout/Breakout.svelte         | 15 ++++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

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..68c4584 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: 'thumbnail' | '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);

From 7223785e807623833f619ffad0d29845b3d11d69 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 28 Jan 2026 12:08:19 +0100
Subject: [PATCH 2/2] Fix type

---
 components/src/Breakout/Breakout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/Breakout/Breakout.svelte b/components/src/Breakout/Breakout.svelte
index 68c4584..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: 'thumbnail' | 'medium' | 'large' | 'bleed';
+		layout: 'small' | 'medium' | 'large' | 'bleed';
 		children?: Snippet;
 	}
 	let { layout = 'medium', children }: BreakoutProps = $props();