ISTWCMS-3574: adding CTAs

source/_patterns/04-components/call-to-action/_call-to-action.scss

+.uw-cta {
+  clear: both;
+  height: 100%;
+  padding: 1rem;
+  width: 100%;
+
+  &.uw-contained-width {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 63rem;
+    padding: 0 1rem;
+  }
+
+  aside {
+    background-color: $uw-black;
+    flex: 1 0 30%;
+    margin: 0 1rem;
+
+    .uw-cta__wrapper {
+      color: $uw-gold;
+    }
+
+    &:hover {
+      background-color: $uw-gold;
+
+      .uw-cta__wrapper {
+        color: $uw-black;
+      }
+    }
+  }
+}
+
+.uw-cta__link {
+  border: 0;
+  display: block;
+  font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
+  padding: 0;
+  text-decoration: none;
+  width: 100%;
+}
+
+.uw-cta__text {
+
+  &--big {
+    font-size: 1.42383rem;
+    letter-spacing: 0.05rem;
+    line-height: 1.2;
+    padding: 0 0.25rem 0.313rem;
+  }
+
+  &--medium {
+    font-size: 1.2rem;
+    letter-spacing: 0.05rem;
+    line-height: 1.2;
+    padding: 0 0.25rem 0.313rem;
+  }
+
+  &--small {
+    font-size: 0.8rem;
+    letter-spacing: 0.02rem;
+    line-height: 1;
+    padding: 0 0.15rem 0.313rem;
+  }
+}
+
+.uw-cta__center-wrapper {
+  align-items: center;
+  display: flex;
+  -ms-flex-align: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  width: 100%;
+}
+
+.uw-cta__wrapper {
+  padding: 1rem 0;
+}

source/_patterns/04-components/call-to-action/call-to-action.twig

+<div class="uw-cta {{ classes }}">
+  <div class="uw-cta__center-wrapper">
+
+    {% for cta in ctas %}
+
+      <aside class="uw-cta__aside">
+
+        {% if cta.link %}
+          <a href="{{ cta.link }}" class="uw-cta__link">
+        {% endif %}
+
+        <div class="uw-cta__wrapper">
+          {% for detail in cta.details %}
+            <div class="uw-cta__text uw-cta__text--{{ detail.type }}">{{ detail.text }}</div>
+          {% endfor %}
+        </div>
+
+        {% if cta.link %}
+          </a>
+        {% endif %}
+
+      </aside>
+
+    {% endfor %}
+
+  </div>
+</div>

source/_patterns/04-components/call-to-action/call-to-action.yml

+ctas:
+  -
+    link: '#'
+    details:
+      -
+        text: 'BT#1'
+        type: 'big'
+      -
+        text: 'MT#1'
+        type: 'medium'
+      -
+        text: 'ST#1'
+        type: 'small'
+    theme: 'org-default'
+  -
+    link: '#'
+    details:
+      - text: 'BT#2'
+        type: 'big'
+      - text: 'ST#2'
+        type: 'small'
+    theme: 'org-default'
+  -
+    link: '#'
+    details:
+      - text: 'BT#1'
+        type: 'big'
+    theme: 'org-default'