Add center class for reviews

innoq · Aug 1, 2024 · 0fc3833 · 0fc3833
1 parent c01d684
commit 0fc3833
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 29 deletions.
diff --git a/components/01-pages/service-pages/reviews-page/_reviews-page.scss b/components/01-pages/service-pages/reviews-page/_reviews-page.scss
@@ -17,6 +17,10 @@
   .longquote__zigzag {
     @include zigzag($brand-gray-10);
   }
+
+  .center-section {
+    text-align: center;
+  }
 }
 
 .button-wrapper {

diff --git a/components/01-pages/service-pages/reviews-page/reviews-page.html b/components/01-pages/service-pages/reviews-page/reviews-page.html
@@ -85,7 +85,7 @@ <h2>Ergebnisbericht & Präsentation</h2>
         </div>
     </section>
     <section class="container-xl container-vertical-spacing-lg stripe stripe--white">
-        <div class="page-layout-md--default">
+        <div class="page-layout-md--default center-section">
             <h2>Was unser Review für Sie leistet</h2>
             <p>{{workshop_text}}</p>
         </div>
@@ -252,7 +252,7 @@ <h2>Auf den richtigen Ebenen ansetzen</h2>
         </div>
     </section>
     <section class="container-xl container-vertical-spacing-xl stripe stripe--gray">
-        <div class="page-layout-md--default">
+        <div class="page-layout-md--default center-section">
             <h2>Spannungsfelder im Blick haben</h2>
             <p>{{intro_text}}</p>
         </div>
@@ -328,30 +328,30 @@ <h3 class="text-grid__heading">Security & Datenschutz</h3>
         </div>
     </section>
     <section class="container-xl container-vertical-spacing-xl stripe stripe--gradient-2">
-        <div class="page-layout-md--default">
+        <div class="page-layout-md--default center-section">
             <h2>Ablauf eines Reviews</h2>
             <ul class="bulletfree-list bulletfree-list--center">
                 <li>Listitem 1 ist ein bisschen länger</li>
                 <li>Listitem 2 ist kurz</li>
                 <li>Listitem 3</li>
             </ul>
         </div>
-        <div class="container-md">
-        <div class="icon-divider">
-            <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
-        </div>
-        <div class="label training">Abstimmen</div>
-        <h3>Kickoff mit Stakeholdern</h3>
-        <ul class="bulletfree-list bulletfree-list--center">
-            <li>Listitem 1 ist ein bisschen länger</li>
-            <li>Listitem 2 ist kurz</li>
-            <li>Listitem 3</li>
-        </ul>
-        <div class="tuple-list__label">Dauer: 1-2 Wochen</div>
-        <div class="icon-divider">
-            <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
-        </div>
-        <div class="label training">Verstehen</div>
+        <div class="container-md center-section">
+            <div class="icon-divider">
+                <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
+            </div>
+            <div class="label training">Abstimmen</div>
+            <h3>Kickoff mit Stakeholdern</h3>
+            <ul class="bulletfree-list bulletfree-list--center">
+                <li>Listitem 1 ist ein bisschen länger</li>
+                <li>Listitem 2 ist kurz</li>
+                <li>Listitem 3</li>
+            </ul>
+            <div class="tuple-list__label">Dauer: 1-2 Wochen</div>
+            <div class="icon-divider">
+                <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
+            </div>
+            <div class="label training">Verstehen</div>
         <h3>Interviews & Analysen</h3>
         <ul class="bulletfree-list bulletfree-list--center">
             <li>Listitem 1 ist ein bisschen länger</li>
@@ -364,21 +364,13 @@ <h3>Interviews & Analysen</h3>
         </div>
         <div class="label training">Darstellen, Bewerten, Empfehlen</div>
         <h3>Ergebnisbericht & Präsentation</h3>
-        <ul class="bulletfree-list">
-            <li>Listitem 1 ist ein bisschen länger</li>
-            <li>Listitem 2 ist kurz</li>
-            <li>Listitem 3</li>
-        </ul>        <div class="tuple-list__label">Dauer: 1-2 Wochen</div><div class="icon-divider">
-            <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
-        </div>
-        <div class="label training">Abstimmen</div>
-        <h3>Kickoff mit Stakeholdern</h3>
         <ul class="bulletfree-list bulletfree-list--center">
             <li>Listitem 1 ist ein bisschen länger</li>
             <li>Listitem 2 ist kurz</li>
             <li>Listitem 3</li>
-        </ul>
+        </ul>        
         <div class="tuple-list__label">Dauer: 1-2 Wochen</div>
+
         <div class="color-container">
             <p>Der Ablauf ist bei längeren Reviews grundsätzlich der gleiche. Interviews und Analysen benötigen bei größeren Reviews
             allerdings deutlich mehr Zeit, die Abstimmungsphase und die Erstellung des Ergebnisberichts dauern dagegen nur