Stylize call-to-action

call-to-action/call-to-action.css

@@ -1,26 +1,34 @@
 .cta {
+  margin: 2em;
   display: grid;
-  grid-template-areas: "title" "text" "button";
-  justify-items: stretch;
-  background-color: rgb(211, 157, 70);
-}
+  border-radius: 10px;
 
-.cta__banner {
-  border-bottom: solid 1px black;
-  display: flex;
+  grid-template-areas: "icon title" "text text" "button button";
+  grid-template-columns: 1fr 5fr;
+  justify-items: stretch;
   align-items: center;
-  justify-content: center;
-  padding: 0.5em 0 1em;
+  background-color: var(--cta-background);
 }
 
-.cta__banner-element {
+.cta__icon {
+  justify-self: center;
+  grid-area: icon;
   margin-right: 0.2em;
 }
 
+.cta__title {
+  grid-area: title;
+}
+
 .cta__text {
-  padding: 0 0.5em 0;
+  justify-self: center;
+  border-top: solid 1px black;
+  grid-area: text;
+  text-align: center;
+  padding: 1em;
+  margin: 0;
 }
 
 .cta__button {
-
+  grid-area: button;
 }

call-to-action/call-to-action.html

@@ -15,10 +15,8 @@
   <h1>Call to action (small container)</h1>
   <div class="show-case">
     <div class="cta">
-        <div class="cta__banner">
-          <i class="cta__banner-element fa fa-exclamation-circle fa-2x"></i> 
-          <h1 class="cta__banner-element">The title</h1>
-        </div>
+      <i class="cta__icon fa fa-exclamation-circle fa-2x"></i> 
+      <h1 class="cta__title">The title</h1>
       <p class="cta__text">The short text to convince you !</p>
       <button class="cta__button">The button !</button>
     </div>
@@ -27,10 +25,8 @@
   <h1>Call to action</h1>
   <div class="show-case show-case--big">
     <div class="cta">
-      <div class="cta__banner">
-        <i class="cta__banner-element fa fa-exclamation-circle fa-3x"></i> 
-        <h1 class="cta__banner-element">The title</h1>
-      </div>
+      <i class="cta__icon fa fa-exclamation-circle fa-3x"></i> 
+      <h1 class="cta__title">The title</h1>
       <p class="cta__text">The short text to convince you !</p>
       <button class="cta__button">The button !</button>
     </div>

call-to-action/style.css

@@ -1,7 +1,7 @@
 @import 'call-to-action.css';
 
 :root {
-
+  --cta-background: rgb(211, 157, 70);
 }
 
 /* Add nodebug class to any parent field (e.g. body) to turn off coloring */