diff --git a/code/frameworks/angular/template/cli/header.component.ts b/code/frameworks/angular/template/cli/header.component.ts
index 603ac7cfeef5..2980d3b3202e 100644
--- a/code/frameworks/angular/template/cli/header.component.ts
+++ b/code/frameworks/angular/template/cli/header.component.ts
@@ -4,7 +4,7 @@ import type { User } from './User';
 @Component({
   selector: 'storybook-header',
   template: `<header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
diff --git a/code/frameworks/angular/template/cli/page.component.ts b/code/frameworks/angular/template/cli/page.component.ts
index 02cc3f06abcd..f3ae4868549e 100644
--- a/code/frameworks/angular/template/cli/page.component.ts
+++ b/code/frameworks/angular/template/cli/page.component.ts
@@ -10,7 +10,7 @@ import type { User } from './User';
       (onLogin)="doLogin()"
       (onCreateAccount)="doCreateAccount()"
     ></storybook-header>
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a
diff --git a/code/frameworks/nextjs/template/cli/js/Header.jsx b/code/frameworks/nextjs/template/cli/js/Header.jsx
index 3862422ed8ec..39e5226cffc1 100644
--- a/code/frameworks/nextjs/template/cli/js/Header.jsx
+++ b/code/frameworks/nextjs/template/cli/js/Header.jsx
@@ -6,7 +6,7 @@ import './header.css';
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
diff --git a/code/frameworks/nextjs/template/cli/js/Page.jsx b/code/frameworks/nextjs/template/cli/js/Page.jsx
index c5fffe953be5..6db1e0ac3f36 100644
--- a/code/frameworks/nextjs/template/cli/js/Page.jsx
+++ b/code/frameworks/nextjs/template/cli/js/Page.jsx
@@ -14,8 +14,7 @@ export const Page = () => {
         onLogout={() => setUser(undefined)}
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
-
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx b/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx
index dc3f3c19c31a..01504601311d 100644
--- a/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx
+++ b/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx
@@ -16,7 +16,7 @@ interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Page.tsx b/code/frameworks/nextjs/template/cli/ts-3-8/Page.tsx
index ec054e813895..e11748301390 100644
--- a/code/frameworks/nextjs/template/cli/ts-3-8/Page.tsx
+++ b/code/frameworks/nextjs/template/cli/ts-3-8/Page.tsx
@@ -19,7 +19,7 @@ export const Page: React.FC = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
diff --git a/code/frameworks/nextjs/template/cli/ts/Header.tsx b/code/frameworks/nextjs/template/cli/ts/Header.tsx
index dc3f3c19c31a..01504601311d 100644
--- a/code/frameworks/nextjs/template/cli/ts/Header.tsx
+++ b/code/frameworks/nextjs/template/cli/ts/Header.tsx
@@ -16,7 +16,7 @@ interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
diff --git a/code/frameworks/nextjs/template/cli/ts/Page.tsx b/code/frameworks/nextjs/template/cli/ts/Page.tsx
index ec054e813895..e11748301390 100644
--- a/code/frameworks/nextjs/template/cli/ts/Page.tsx
+++ b/code/frameworks/nextjs/template/cli/ts/Page.tsx
@@ -19,7 +19,7 @@ export const Page: React.FC = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
diff --git a/code/lib/cli/rendererAssets/common/header.css b/code/lib/cli/rendererAssets/common/header.css
index 44c549da27ce..d9a70528a3a1 100644
--- a/code/lib/cli/rendererAssets/common/header.css
+++ b/code/lib/cli/rendererAssets/common/header.css
@@ -1,4 +1,4 @@
-.wrapper {
+.storybook-header {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 15px 20px;
@@ -7,12 +7,12 @@
   justify-content: space-between;
 }
 
-svg {
+.storybook-header svg {
   display: inline-block;
   vertical-align: top;
 }
 
-h1 {
+.storybook-header h1 {
   font-weight: 700;
   font-size: 20px;
   line-height: 1;
@@ -21,11 +21,11 @@ h1 {
   vertical-align: top;
 }
 
-button + button {
+.storybook-header button + button {
   margin-left: 10px;
 }
 
-.welcome {
+.storybook-header .welcome {
   color: #333;
   font-size: 14px;
   margin-right: 10px;
diff --git a/code/lib/cli/rendererAssets/common/page.css b/code/lib/cli/rendererAssets/common/page.css
index fb64fe462943..098dad118500 100644
--- a/code/lib/cli/rendererAssets/common/page.css
+++ b/code/lib/cli/rendererAssets/common/page.css
@@ -1,4 +1,4 @@
-section {
+.storybook-page {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 24px;
@@ -8,7 +8,7 @@ section {
   color: #333;
 }
 
-section h2 {
+.storybook-page h2 {
   font-weight: 700;
   font-size: 32px;
   line-height: 1;
@@ -17,25 +17,25 @@ section h2 {
   vertical-align: top;
 }
 
-section p {
+.storybook-page p {
   margin: 1em 0;
 }
 
-section a {
+.storybook-page a {
   text-decoration: none;
   color: #1ea7fd;
 }
 
-section ul {
+.storybook-page ul {
   padding-left: 30px;
   margin: 1em 0;
 }
 
-section li {
+.storybook-page li {
   margin-bottom: 8px;
 }
 
-section .tip {
+.storybook-page .tip {
   display: inline-block;
   border-radius: 1em;
   font-size: 11px;
@@ -48,14 +48,14 @@ section .tip {
   vertical-align: top;
 }
 
-section .tip-wrapper {
+.storybook-page .tip-wrapper {
   font-size: 13px;
   line-height: 20px;
   margin-top: 40px;
   margin-bottom: 40px;
 }
 
-section .tip-wrapper svg {
+.storybook-page .tip-wrapper svg {
   display: inline-block;
   height: 12px;
   width: 12px;
@@ -64,6 +64,6 @@ section .tip-wrapper svg {
   margin-top: 3px;
 }
 
-section .tip-wrapper svg path {
+.storybook-page .tip-wrapper svg path {
   fill: #1ea7fd;
 }
diff --git a/code/renderers/html/template/cli/js/Header.js b/code/renderers/html/template/cli/js/Header.js
index 925652350ede..30b4c5156ad6 100644
--- a/code/renderers/html/template/cli/js/Header.js
+++ b/code/renderers/html/template/cli/js/Header.js
@@ -5,7 +5,7 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }) => {
   const header = document.createElement('header');
 
   const wrapper = document.createElement('div');
-  wrapper.className = 'wrapper';
+  wrapper.className = 'storybook-header';
 
   const logo = `<div>
     <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
diff --git a/code/renderers/html/template/cli/js/Page.js b/code/renderers/html/template/cli/js/Page.js
index a2b56d7cd5f6..227cddeb0255 100644
--- a/code/renderers/html/template/cli/js/Page.js
+++ b/code/renderers/html/template/cli/js/Page.js
@@ -34,7 +34,7 @@ export const createPage = () => {
   article.appendChild(header);
 
   const section = `
-  <section>
+  <section class="storybook-page">
     <h2>Pages in Storybook</h2>
     <p>
       We recommend building UIs with a
diff --git a/code/renderers/html/template/cli/ts-3-8/Header.ts b/code/renderers/html/template/cli/ts-3-8/Header.ts
index 94a31e6b5317..7bee76259651 100644
--- a/code/renderers/html/template/cli/ts-3-8/Header.ts
+++ b/code/renderers/html/template/cli/ts-3-8/Header.ts
@@ -12,7 +12,7 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }: Heade
   const header = document.createElement('header');
 
   const wrapper = document.createElement('div');
-  wrapper.className = 'wrapper';
+  wrapper.className = 'storybook-header';
 
   const logo = `<div>
     <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
diff --git a/code/renderers/html/template/cli/ts-3-8/Page.ts b/code/renderers/html/template/cli/ts-3-8/Page.ts
index 4c4028ff1d99..3ff4211d8a8a 100644
--- a/code/renderers/html/template/cli/ts-3-8/Page.ts
+++ b/code/renderers/html/template/cli/ts-3-8/Page.ts
@@ -38,7 +38,7 @@ export const createPage = () => {
   article.appendChild(header);
 
   const section = `
-  <section>
+  <section class="storybook-page">
     <h2>Pages in Storybook</h2>
     <p>
       We recommend building UIs with a
diff --git a/code/renderers/html/template/cli/ts-4-9/Header.ts b/code/renderers/html/template/cli/ts-4-9/Header.ts
index 94a31e6b5317..7bee76259651 100644
--- a/code/renderers/html/template/cli/ts-4-9/Header.ts
+++ b/code/renderers/html/template/cli/ts-4-9/Header.ts
@@ -12,7 +12,7 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }: Heade
   const header = document.createElement('header');
 
   const wrapper = document.createElement('div');
-  wrapper.className = 'wrapper';
+  wrapper.className = 'storybook-header';
 
   const logo = `<div>
     <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
diff --git a/code/renderers/html/template/cli/ts-4-9/Page.ts b/code/renderers/html/template/cli/ts-4-9/Page.ts
index 4c4028ff1d99..3ff4211d8a8a 100644
--- a/code/renderers/html/template/cli/ts-4-9/Page.ts
+++ b/code/renderers/html/template/cli/ts-4-9/Page.ts
@@ -38,7 +38,7 @@ export const createPage = () => {
   article.appendChild(header);
 
   const section = `
-  <section>
+  <section class="storybook-page">
     <h2>Pages in Storybook</h2>
     <p>
       We recommend building UIs with a
diff --git a/code/renderers/preact/template/cli/Header.jsx b/code/renderers/preact/template/cli/Header.jsx
index 99ee8c54b51f..8a722e57d331 100644
--- a/code/renderers/preact/template/cli/Header.jsx
+++ b/code/renderers/preact/template/cli/Header.jsx
@@ -5,7 +5,7 @@ import './header.css';
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
diff --git a/code/renderers/preact/template/cli/Page.jsx b/code/renderers/preact/template/cli/Page.jsx
index 4344c071980c..12ca119d0b04 100644
--- a/code/renderers/preact/template/cli/Page.jsx
+++ b/code/renderers/preact/template/cli/Page.jsx
@@ -14,7 +14,7 @@ export const Page = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
diff --git a/code/renderers/react/template/cli/js/Header.jsx b/code/renderers/react/template/cli/js/Header.jsx
index 3862422ed8ec..39e5226cffc1 100644
--- a/code/renderers/react/template/cli/js/Header.jsx
+++ b/code/renderers/react/template/cli/js/Header.jsx
@@ -6,7 +6,7 @@ import './header.css';
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
diff --git a/code/renderers/react/template/cli/js/Page.jsx b/code/renderers/react/template/cli/js/Page.jsx
index c5fffe953be5..c421401138ed 100644
--- a/code/renderers/react/template/cli/js/Page.jsx
+++ b/code/renderers/react/template/cli/js/Page.jsx
@@ -15,7 +15,7 @@ export const Page = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
diff --git a/code/renderers/react/template/cli/ts-3-8/Header.tsx b/code/renderers/react/template/cli/ts-3-8/Header.tsx
index dc3f3c19c31a..01504601311d 100644
--- a/code/renderers/react/template/cli/ts-3-8/Header.tsx
+++ b/code/renderers/react/template/cli/ts-3-8/Header.tsx
@@ -16,7 +16,7 @@ interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
diff --git a/code/renderers/react/template/cli/ts-3-8/Page.tsx b/code/renderers/react/template/cli/ts-3-8/Page.tsx
index 885f2b41f1ee..994d8908ed4b 100644
--- a/code/renderers/react/template/cli/ts-3-8/Page.tsx
+++ b/code/renderers/react/template/cli/ts-3-8/Page.tsx
@@ -19,7 +19,7 @@ export const Page: React.FC = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
diff --git a/code/renderers/react/template/cli/ts-4-9/Header.tsx b/code/renderers/react/template/cli/ts-4-9/Header.tsx
index dc3f3c19c31a..01504601311d 100644
--- a/code/renderers/react/template/cli/ts-4-9/Header.tsx
+++ b/code/renderers/react/template/cli/ts-4-9/Header.tsx
@@ -16,7 +16,7 @@ interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
diff --git a/code/renderers/react/template/cli/ts-4-9/Page.tsx b/code/renderers/react/template/cli/ts-4-9/Page.tsx
index ec054e813895..e11748301390 100644
--- a/code/renderers/react/template/cli/ts-4-9/Page.tsx
+++ b/code/renderers/react/template/cli/ts-4-9/Page.tsx
@@ -19,7 +19,7 @@ export const Page: React.FC = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
diff --git a/code/renderers/svelte/template/cli/js/Header.svelte b/code/renderers/svelte/template/cli/js/Header.svelte
index 8350b35fd664..a9c08f75db7d 100644
--- a/code/renderers/svelte/template/cli/js/Header.svelte
+++ b/code/renderers/svelte/template/cli/js/Header.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <header>
-  <div class="wrapper">
+  <div class="storybook-header">
     <div>
       <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
         <g fill="none" fill-rule="evenodd">
diff --git a/code/renderers/svelte/template/cli/js/Page.svelte b/code/renderers/svelte/template/cli/js/Page.svelte
index d545d908e500..acc473c2518f 100644
--- a/code/renderers/svelte/template/cli/js/Page.svelte
+++ b/code/renderers/svelte/template/cli/js/Page.svelte
@@ -13,7 +13,7 @@
     on:createAccount={() => (user = { name: 'Jane Doe' })}
   />
 
-  <section>
+  <section class="storybook-page">
     <h2>Pages in Storybook</h2>
     <p>
       We recommend building UIs with a
diff --git a/code/renderers/svelte/template/cli/ts-3-8/Header.svelte b/code/renderers/svelte/template/cli/ts-3-8/Header.svelte
index e3b8d039f864..cb6f82d5e666 100644
--- a/code/renderers/svelte/template/cli/ts-3-8/Header.svelte
+++ b/code/renderers/svelte/template/cli/ts-3-8/Header.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <header>
-  <div class="wrapper">
+  <div class="storybook-header">
     <div>
       <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
         <g fill="none" fill-rule="evenodd">
diff --git a/code/renderers/svelte/template/cli/ts-3-8/Page.svelte b/code/renderers/svelte/template/cli/ts-3-8/Page.svelte
index c2c6369f565e..94cdb07ecd39 100644
--- a/code/renderers/svelte/template/cli/ts-3-8/Page.svelte
+++ b/code/renderers/svelte/template/cli/ts-3-8/Page.svelte
@@ -13,7 +13,7 @@
     on:createAccount={() => (user = { name: 'Jane Doe' })}
   />
 
-  <section>
+  <section class="storybook-page">
     <h2>Pages in Storybook</h2>
     <p>
       We recommend building UIs with a
diff --git a/code/renderers/svelte/template/cli/ts-4-9/Header.svelte b/code/renderers/svelte/template/cli/ts-4-9/Header.svelte
index e3b8d039f864..cb6f82d5e666 100644
--- a/code/renderers/svelte/template/cli/ts-4-9/Header.svelte
+++ b/code/renderers/svelte/template/cli/ts-4-9/Header.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <header>
-  <div class="wrapper">
+  <div class="storybook-header">
     <div>
       <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
         <g fill="none" fill-rule="evenodd">
diff --git a/code/renderers/svelte/template/cli/ts-4-9/Page.svelte b/code/renderers/svelte/template/cli/ts-4-9/Page.svelte
index c2c6369f565e..94cdb07ecd39 100644
--- a/code/renderers/svelte/template/cli/ts-4-9/Page.svelte
+++ b/code/renderers/svelte/template/cli/ts-4-9/Page.svelte
@@ -13,7 +13,7 @@
     on:createAccount={() => (user = { name: 'Jane Doe' })}
   />
 
-  <section>
+  <section class="storybook-page">
     <h2>Pages in Storybook</h2>
     <p>
       We recommend building UIs with a
diff --git a/code/renderers/vue/template/cli/Header.vue b/code/renderers/vue/template/cli/Header.vue
index bb35153df5fd..4164c64bb144 100644
--- a/code/renderers/vue/template/cli/Header.vue
+++ b/code/renderers/vue/template/cli/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fill-rule="evenodd">
diff --git a/code/renderers/vue/template/cli/Page.vue b/code/renderers/vue/template/cli/Page.vue
index 5a45445ed909..c57bfa7b10d5 100644
--- a/code/renderers/vue/template/cli/Page.vue
+++ b/code/renderers/vue/template/cli/Page.vue
@@ -7,7 +7,7 @@
       @onCreateAccount="onCreateAccount"
     />
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a
diff --git a/code/renderers/vue3/template/cli/js/Header.vue b/code/renderers/vue3/template/cli/js/Header.vue
index 24980d9256d2..16d7740d96c4 100644
--- a/code/renderers/vue3/template/cli/js/Header.vue
+++ b/code/renderers/vue3/template/cli/js/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fill-rule="evenodd">
diff --git a/code/renderers/vue3/template/cli/js/Page.vue b/code/renderers/vue3/template/cli/js/Page.vue
index bb9219ee5364..245401b72c4d 100644
--- a/code/renderers/vue3/template/cli/js/Page.vue
+++ b/code/renderers/vue3/template/cli/js/Page.vue
@@ -2,7 +2,7 @@
   <article>
     <my-header :user="user" @login="onLogin" @logout="onLogout" @createAccount="onCreateAccount" />
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a
diff --git a/code/renderers/vue3/template/cli/ts-3-8/Header.vue b/code/renderers/vue3/template/cli/ts-3-8/Header.vue
index bcccd2946325..b716db02b3f5 100644
--- a/code/renderers/vue3/template/cli/ts-3-8/Header.vue
+++ b/code/renderers/vue3/template/cli/ts-3-8/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fill-rule="evenodd">
diff --git a/code/renderers/vue3/template/cli/ts-3-8/Page.vue b/code/renderers/vue3/template/cli/ts-3-8/Page.vue
index 16bbd060a6cc..6a6e5eb1a4af 100644
--- a/code/renderers/vue3/template/cli/ts-3-8/Page.vue
+++ b/code/renderers/vue3/template/cli/ts-3-8/Page.vue
@@ -2,7 +2,7 @@
   <article>
     <my-header :user="user" @login="onLogin" @logout="onLogout" @create-account="onCreateAccount" />
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a
@@ -28,7 +28,9 @@
       </ul>
       <p>
         Get a guided tutorial on component-driven development at
-        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">Storybook tutorials</a>
+        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer"
+          >Storybook tutorials</a
+        >
         . Read more in the
         <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
         .
@@ -40,7 +42,9 @@
           <g fill="none" fill-rule="evenodd">
             <path
               d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-              id="a" fill="#999" />
+              id="a"
+              fill="#999"
+            />
           </g>
         </svg>
         Viewports addon in the toolbar
@@ -55,7 +59,7 @@ import MyHeader from './Header.vue';
 
 import { ref } from 'vue';
 
-const user = ref<{ name: string } | null>(null)
+const user = ref<{ name: string } | null>(null);
 
 const onLogin = () => {
   user.value = { name: 'Jane Doe' };
@@ -66,5 +70,4 @@ const onLogout = () => {
 const onCreateAccount = () => {
   user.value = { name: 'Jane Doe' };
 };
-
 </script>
diff --git a/code/renderers/vue3/template/cli/ts-4-9/Header.vue b/code/renderers/vue3/template/cli/ts-4-9/Header.vue
index bcccd2946325..b716db02b3f5 100644
--- a/code/renderers/vue3/template/cli/ts-4-9/Header.vue
+++ b/code/renderers/vue3/template/cli/ts-4-9/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fill-rule="evenodd">
diff --git a/code/renderers/vue3/template/cli/ts-4-9/Page.vue b/code/renderers/vue3/template/cli/ts-4-9/Page.vue
index 16bbd060a6cc..6a6e5eb1a4af 100644
--- a/code/renderers/vue3/template/cli/ts-4-9/Page.vue
+++ b/code/renderers/vue3/template/cli/ts-4-9/Page.vue
@@ -2,7 +2,7 @@
   <article>
     <my-header :user="user" @login="onLogin" @logout="onLogout" @create-account="onCreateAccount" />
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a
@@ -28,7 +28,9 @@
       </ul>
       <p>
         Get a guided tutorial on component-driven development at
-        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">Storybook tutorials</a>
+        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer"
+          >Storybook tutorials</a
+        >
         . Read more in the
         <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
         .
@@ -40,7 +42,9 @@
           <g fill="none" fill-rule="evenodd">
             <path
               d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-              id="a" fill="#999" />
+              id="a"
+              fill="#999"
+            />
           </g>
         </svg>
         Viewports addon in the toolbar
@@ -55,7 +59,7 @@ import MyHeader from './Header.vue';
 
 import { ref } from 'vue';
 
-const user = ref<{ name: string } | null>(null)
+const user = ref<{ name: string } | null>(null);
 
 const onLogin = () => {
   user.value = { name: 'Jane Doe' };
@@ -66,5 +70,4 @@ const onLogout = () => {
 const onCreateAccount = () => {
   user.value = { name: 'Jane Doe' };
 };
-
 </script>
diff --git a/code/renderers/web-components/template/cli/js/Header.js b/code/renderers/web-components/template/cli/js/Header.js
index 9cb94e208ee3..19fea63604a8 100644
--- a/code/renderers/web-components/template/cli/js/Header.js
+++ b/code/renderers/web-components/template/cli/js/Header.js
@@ -5,7 +5,7 @@ import './header.css';
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => html`
   <header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
diff --git a/code/renderers/web-components/template/cli/js/Page.js b/code/renderers/web-components/template/cli/js/Page.js
index 17ea864c2bc2..9ee0db99fcb0 100644
--- a/code/renderers/web-components/template/cli/js/Page.js
+++ b/code/renderers/web-components/template/cli/js/Page.js
@@ -11,7 +11,7 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => html`
       onCreateAccount,
     })}
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a
diff --git a/code/renderers/web-components/template/cli/ts-3-8/Header.ts b/code/renderers/web-components/template/cli/ts-3-8/Header.ts
index b14c312a9d85..d1ca01450c8a 100644
--- a/code/renderers/web-components/template/cli/ts-3-8/Header.ts
+++ b/code/renderers/web-components/template/cli/ts-3-8/Header.ts
@@ -16,7 +16,7 @@ export interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => html`
   <header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
diff --git a/code/renderers/web-components/template/cli/ts-3-8/Page.ts b/code/renderers/web-components/template/cli/ts-3-8/Page.ts
index 15764da44329..74711e4aa7e7 100644
--- a/code/renderers/web-components/template/cli/ts-3-8/Page.ts
+++ b/code/renderers/web-components/template/cli/ts-3-8/Page.ts
@@ -22,7 +22,7 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) =>
       onCreateAccount,
     })}
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a
diff --git a/code/renderers/web-components/template/cli/ts-4-9/Header.ts b/code/renderers/web-components/template/cli/ts-4-9/Header.ts
index b14c312a9d85..d1ca01450c8a 100644
--- a/code/renderers/web-components/template/cli/ts-4-9/Header.ts
+++ b/code/renderers/web-components/template/cli/ts-4-9/Header.ts
@@ -16,7 +16,7 @@ export interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => html`
   <header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
diff --git a/code/renderers/web-components/template/cli/ts-4-9/Page.ts b/code/renderers/web-components/template/cli/ts-4-9/Page.ts
index 15764da44329..74711e4aa7e7 100644
--- a/code/renderers/web-components/template/cli/ts-4-9/Page.ts
+++ b/code/renderers/web-components/template/cli/ts-4-9/Page.ts
@@ -22,7 +22,7 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) =>
       onCreateAccount,
     })}
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a