Update existing hero examples with new suru

canonical · Feb 9, 2024 · 322735e · 322735e
1 parent df3eb8e
commit 322735e
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 41 deletions.
diff --git a/templates/docs/examples/brochure/_50-50.html b/templates/docs/examples/brochure/_50-50.html
@@ -53,5 +53,3 @@ <h2>Trial at no extra cost for existing Ubuntu Advantage customers</h2>
     </div>
   </div>
 </section>
-
-<div class="p-suru"></div>
diff --git a/templates/docs/examples/brochure/hero-25-75.html b/templates/docs/examples/brochure/hero-25-75.html
@@ -8,36 +8,37 @@
 {% block content %}
 
 <section>
-    <div class="row--25-75">
-        <div class="col">
-            <h1>H1: 2-3 words</h1>
-        </div>
-        <div class="col">
-            <div class="p-section">
-                <p class="p-heading--2">H2: 5-15 words, up to 3 rows of copy...</p>
+    <div class="p-suru--25-75">
+        <div class="row--25-75">
+            <div class="col">
+                <h1>H1: 2-3 words</h1>
+            </div>
+            <div class="col">
+                <div class="p-section">
+                    <p class="p-heading--2">H2: 5-15 words, up to 3 rows of copy...</p>
+                </div>
             </div>
         </div>
-    </div>
-    <div class="row--25-75">
-        <div class="col">
-            <img src="https://assets.ubuntu.com/v1/b200e162-design.svg" alt="" width="80">
-        </div>
-        <div class="col">
-            <div class="p-section">
-                <p>Multi-cloud (also referred to as multi cloud or multicloud) is a concept that refers to using multiple clouds from more than one cloud service provider at the same time. The term is also used to refer to the simultaneous running of bare metal, virtualised and containerised workloads.</p>
+        <div class="row--25-75">
+            <div class="col">
+                <img src="https://assets.ubuntu.com/v1/b200e162-design.svg" alt="" width="80">
+            </div>
+            <div class="col">
+                <div class="p-section">
+                    <p>Multi-cloud (also referred to as multi cloud or multicloud) is a concept that refers to using multiple clouds from more than one cloud service provider at the same time. The term is also used to refer to the simultaneous running of bare metal, virtualised and containerised workloads.</p>
+                </div>
             </div>
         </div>
-    </div>
-    <div class="row--25-75">
-        <div class="col">
-            <hr />
-            <a href="#" class="p-button--positive">CTA up to 3 words</a>
-            <a href="#" class="p-button">Optional button</a>
-            <a href="#">Link CTA up to 5 words</a>
-            <!-- p-section spacing not needed because it's followed by suru -->
+        <div class="row--25-75">
+            <div class="col">
+                <hr />
+                <a href="#" class="p-button--positive">CTA up to 3 words</a>
+                <a href="#" class="p-button">Optional button</a>
+                <a href="#">Link CTA up to 5 words</a>
+                <!-- p-section spacing not needed because it's followed by suru -->
+            </div>
         </div>
     </div>
-    <div class="p-suru"></div>
 </section>
 
 {% endblock %}
diff --git a/templates/docs/examples/brochure/hero-75-offset.html b/templates/docs/examples/brochure/hero-75-offset.html
@@ -8,24 +8,25 @@
 {% block content %}
 
 <section>
-    <div class="row--25-75">
-        <div class="col">
-            <div class="p-section">
-                <h1 class="u-no-margin--bottom">H1: 3-5 words</h1>
-                <p class="p-heading--2">H2: 5-15 words, up to 3 rows of copy...</p>
+    <div class="p-suru--25-75">
+        <div class="row--25-75">
+            <div class="col">
+                <div class="p-section">
+                    <h1 class="u-no-margin--bottom">H1: 3-5 words</h1>
+                    <p class="p-heading--2">H2: 5-15 words, up to 3 rows of copy...</p>
+                </div>
+                <div class="p-section">
+                    <p>Multi-cloud (also referred to as multi cloud or multicloud) is a concept that refers to using multiple clouds from more than one cloud service provider at the same time. The term is also used to refer to the simultaneous running of bare metal, virtualised and containerised workloads.</p>
+                    <p>In conjunction with a hybrid cloud architecture, the multi-cloud approach enables organisations to optimise their infrastructure costs. Multi-cloud reflects the reality of most organisations today and is expected to become the standard for cloud infrastructure in the coming years.</p>
+                </div>
+                <hr />
+                <a href="#" class="p-button--positive">CTA up to 3 words</a>
+                <a href="#" class="p-button">Optional button</a>
+                <a href="#">Link CTA up to 5 words</a>
+                <!-- p-section spacing not needed because it's followed by suru -->
             </div>
-            <div class="p-section">
-                <p>Multi-cloud (also referred to as multi cloud or multicloud) is a concept that refers to using multiple clouds from more than one cloud service provider at the same time. The term is also used to refer to the simultaneous running of bare metal, virtualised and containerised workloads.</p>
-                <p>In conjunction with a hybrid cloud architecture, the multi-cloud approach enables organisations to optimise their infrastructure costs. Multi-cloud reflects the reality of most organisations today and is expected to become the standard for cloud infrastructure in the coming years.</p>
-            </div>
-            <hr />
-            <a href="#" class="p-button--positive">CTA up to 3 words</a>
-            <a href="#" class="p-button">Optional button</a>
-            <a href="#">Link CTA up to 5 words</a>
-            <!-- p-section spacing not needed because it's followed by suru -->
         </div>
     </div>
-    <div class="p-suru"></div>
 </section>
 
 {% endblock %}