diff --git a/patterns/public-page-patterns.html b/patterns/public-page-patterns.html
index 08d01aa..78866a9 100644
--- a/patterns/public-page-patterns.html
+++ b/patterns/public-page-patterns.html
@@ -6,7 +6,7 @@
   <title>Styleguide – Public Page Patterns</title>
   <link rel="stylesheet" href="../styleguide.css">
 </head>
-<body>
+<body class="sg-page-public-page-patterns">
 
   <h1 class="sg-main-heading">Patterns – Public Page Patterns</h1>
 
diff --git a/styles/44-components-public-page-components.css b/styles/44-components-public-page-components.css
index a4ff2bc..504f102 100644
--- a/styles/44-components-public-page-components.css
+++ b/styles/44-components-public-page-components.css
@@ -73,6 +73,12 @@
   width: 100%;
 }
 
+.sg-page-public-page-patterns .sg-preview-area {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
 @media (max-width: 48rem) {
   .sg-text-block,
   .sg-card--call-to-action-card {
