diff --git a/src/layout/snippets/fixed-drawer-demo.html b/src/layout/snippets/fixed-drawer-demo.html
index b798f103..e11ec9f7 100644
--- a/src/layout/snippets/fixed-drawer-demo.html
+++ b/src/layout/snippets/fixed-drawer-demo.html
@@ -5,7 +5,7 @@
   position: relative;
   height: 300px;
 }
-.fixed-drawer-container .your-content {
+.fixed-drawer-container .page-content {
   height: 600px;
 }
 </style>
diff --git a/src/layout/snippets/fixed-drawer.html b/src/layout/snippets/fixed-drawer.html
index af49ebdb..f2c849c5 100644
--- a/src/layout/snippets/fixed-drawer.html
+++ b/src/layout/snippets/fixed-drawer.html
@@ -11,6 +11,6 @@
     </nav>
   </div>
   <main class="mdl-layout__content">
-    <div class="your-content"></div>
+    <div class="page-content"><!-- Your content goes here --></div>
   </main>
 </div>
diff --git a/src/layout/snippets/fixed-header-demo.html b/src/layout/snippets/fixed-header-demo.html
index b8509f23..4d5a133c 100644
--- a/src/layout/snippets/fixed-header-demo.html
+++ b/src/layout/snippets/fixed-header-demo.html
@@ -5,7 +5,7 @@
   position: relative;
   height: 300px;
 }
-.fixed-header-container .your-content {
+.fixed-header-container .page-content {
   height: 600px;
 }
 </style>
diff --git a/src/layout/snippets/fixed-header-drawer-demo.html b/src/layout/snippets/fixed-header-drawer-demo.html
index 0a6f24d8..020066df 100644
--- a/src/layout/snippets/fixed-header-drawer-demo.html
+++ b/src/layout/snippets/fixed-header-drawer-demo.html
@@ -5,7 +5,7 @@
   position: relative;
   height: 300px;
 }
-.fixed-header-drawer-container .your-content {
+.fixed-header-drawer-container .page-content {
   height: 600px;
 }
 </style>
diff --git a/src/layout/snippets/fixed-header-drawer.html b/src/layout/snippets/fixed-header-drawer.html
index 98c9671f..d4b70761 100644
--- a/src/layout/snippets/fixed-header-drawer.html
+++ b/src/layout/snippets/fixed-header-drawer.html
@@ -29,7 +29,7 @@
       </nav>
     </div>
     <main class="mdl-layout__content">
-      <div class="your-content"></div>
+      <div class="page-content"><!-- Your content goes here --></div>
     </main>
   </div>
 </div>
diff --git a/src/layout/snippets/fixed-header.html b/src/layout/snippets/fixed-header.html
index 54e8375e..43ecea3a 100644
--- a/src/layout/snippets/fixed-header.html
+++ b/src/layout/snippets/fixed-header.html
@@ -25,6 +25,6 @@
     </nav>
   </div>
   <main class="mdl-layout__content">
-    <div class="your-content"></div>
+    <div class="page-content"><!-- Your content goes here --></div>
   </main>
 </div>
diff --git a/src/layout/snippets/fixed-tabs-demo.html b/src/layout/snippets/fixed-tabs-demo.html
index c5420b35..2e940bb5 100644
--- a/src/layout/snippets/fixed-tabs-demo.html
+++ b/src/layout/snippets/fixed-tabs-demo.html
@@ -5,7 +5,7 @@
   position: relative;
   height: 300px;
 }
-.fixed-tabs-container .your-content {
+.fixed-tabs-container .page-content {
   height: 600px;
 }
 </style>
diff --git a/src/layout/snippets/fixed-tabs.html b/src/layout/snippets/fixed-tabs.html
index 790d1137..d9e75211 100644
--- a/src/layout/snippets/fixed-tabs.html
+++ b/src/layout/snippets/fixed-tabs.html
@@ -18,13 +18,13 @@
   </div>
   <main class="mdl-layout__content">
     <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
-      <div class="your-content"></div>
+      <div class="page-content"><!-- Your content goes here --></div>
     </section>
     <section class="mdl-layout__tab-panel" id="fixed-tab-2">
-      <div class="your-content"></div>
+      <div class="page-content"><!-- Your content goes here --></div>
     </section>
     <section class="mdl-layout__tab-panel" id="fixed-tab-3">
-      <div class="your-content"></div>
+      <div class="page-content"><!-- Your content goes here --></div>
     </section>
   </main>
 </div>
diff --git a/src/layout/snippets/scrollable-tabs-demo.html b/src/layout/snippets/scrollable-tabs-demo.html
index 4912f7cd..eeec97bc 100644
--- a/src/layout/snippets/scrollable-tabs-demo.html
+++ b/src/layout/snippets/scrollable-tabs-demo.html
@@ -5,7 +5,7 @@
   position: relative;
   height: 300px;
 }
-.scrollable-tabs-container .your-content {
+.scrollable-tabs-container .page-content {
   height: 600px;
 }
 </style>
diff --git a/src/layout/snippets/scrollable-tabs.html b/src/layout/snippets/scrollable-tabs.html
index e3b82200..822863a1 100644
--- a/src/layout/snippets/scrollable-tabs.html
+++ b/src/layout/snippets/scrollable-tabs.html
@@ -20,22 +20,22 @@
   </div>
   <main class="mdl-layout__content">
     <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
-      <div class="your-content"></div>
+      <div class="page-content"><!-- Your content goes here --></div>
     </section>
     <section class="mdl-layout__tab-panel" id="scroll-tab-2">
-      <div class="your-content"></div>
+      <div class="page-content"><!-- Your content goes here --></div>
     </section>
     <section class="mdl-layout__tab-panel" id="scroll-tab-3">
-      <div class="your-content"></div>
+      <div class="page-content"><!-- Your content goes here --></div>
     </section>
     <section class="mdl-layout__tab-panel" id="scroll-tab-4">
-      <div class="your-content"></div>
+      <div class="page-content"><!-- Your content goes here --></div>
     </section>
     <section class="mdl-layout__tab-panel" id="scroll-tab-5">
-      <div class="your-content"></div>
+      <div class="page-content"><!-- Your content goes here --></div>
     </section>
     <section class="mdl-layout__tab-panel" id="scroll-tab-6">
-      <div class="your-content"></div>
+      <div class="page-content"><!-- Your content goes here --></div>
     </section>
   </main>
 </div>
diff --git a/src/layout/snippets/scrolling-header-demo.html b/src/layout/snippets/scrolling-header-demo.html
index 5fb1c580..c4fcd591 100644
--- a/src/layout/snippets/scrolling-header-demo.html
+++ b/src/layout/snippets/scrolling-header-demo.html
@@ -5,7 +5,7 @@
   position: relative;
   height: 300px;
 }
-.scrolling-header-container .your-content {
+.scrolling-header-container .page-content {
   height: 600px;
 }
 </style>
diff --git a/src/layout/snippets/scrolling-header.html b/src/layout/snippets/scrolling-header.html
index 69bcd175..b4e93d58 100644
--- a/src/layout/snippets/scrolling-header.html
+++ b/src/layout/snippets/scrolling-header.html
@@ -26,6 +26,6 @@
     </nav>
   </div>
   <main class="mdl-layout__content">
-    <div class="your-content"></div>
+    <div class="page-content"><!-- Your content goes here --></div>
   </main>
 </div>
diff --git a/src/layout/snippets/waterfall-header-demo.html b/src/layout/snippets/waterfall-header-demo.html
index 5c58360f..82dccfd3 100644
--- a/src/layout/snippets/waterfall-header-demo.html
+++ b/src/layout/snippets/waterfall-header-demo.html
@@ -5,7 +5,7 @@
   position: relative;
   height: 300px;
 }
-.waterfall-header-container .your-content {
+.waterfall-header-container .page-content {
   height: 600px;
 }
 </style>
diff --git a/src/layout/snippets/waterfall-header.html b/src/layout/snippets/waterfall-header.html
index 22e86ec7..ef993b6f 100644
--- a/src/layout/snippets/waterfall-header.html
+++ b/src/layout/snippets/waterfall-header.html
@@ -40,6 +40,6 @@
     </nav>
   </div>
   <main class="mdl-layout__content">
-    <div class="your-content"></div>
+    <div class="page-content"><!-- Your content goes here --></div>
   </main>
 </div>