Generic CTA Buttons
Your basic CTA button component comes with a title, and an optional icon and body copy. It can have 2 or 3 buttons.
The c-cta-buttons__item element is a flex element which allows the size of the buttons to adjust based on how many buttons are present.
<section role="menu" class="o-grid c-cta-buttons u-text-center">
<div class="c-cta-buttons__item o-grid__item-12 o-grid__item@md">
<div class="c-cta-buttons__container u-p-sm u-d-flex u-f-align-center u-f-justify-center o-cover-link">
<!-- Optional icon -->
<div class="c-cta-buttons__img u-m-r">
<span class="o-svg-icon">
<svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
<path d="M484.25 330l-101.59-43.55a45.86 45.86 0 00-53.39 13.1l-32.7 40a311.08 311.08 0 01-124.19-124.12l40-32.7a45.91 45.91 0 0013.1-53.42L182 27.79a45.63 45.63 0 00-52.31-26.61L35.5 22.89A45.59 45.59 0 000 67.5C0 313.76 199.68 512.1 444.56 512a45.58 45.58 0 0044.59-35.51l21.7-94.22a45.75 45.75 0 00-26.6-52.27zm-41.59 134.09C225.08 463.09 49 287 48 69.3l90.69-20.9 42.09 98.22-68.09 55.71c46.39 99 98.19 150.63 197 197l55.69-68.11 98.19 42.11z" fill="currentColor" />
</svg>
</span>
</div>
<!-- CTA Main Text -->
<a href="#" role="menuitem" class="o-cover-link__overlay">
<span class="u-text-bold u-text-uppercase">
Title 1
</span>
<!-- Optional secondary text -->
<span class="u-d-block u-text-small">
Lorem ipsum dolor sit amet
</span>
</a>
</div>
</div>
<div class="c-cta-buttons__item o-grid__item-12 o-grid__item@md">
<div class="c-cta-buttons__container u-p-sm u-d-flex u-f-align-center u-f-justify-center o-cover-link">
<!-- Optional icon -->
<div class="c-cta-buttons__img u-m-r">
<span class="o-svg-icon">
<svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
<path d="M120 334v18c0 88.2 75.4 160 168 160s168-71.8 168-160v-99.7c32.3-10.1 55.7-40.2 56-75.7.3-43.4-34.6-79.6-78.1-80.6-45-1-81.9 35.2-81.9 80 0 35.8 23.5 66.1 56 76.3V352c0 61.8-53.8 112-120 112s-120-50.2-120-112v-18c68-11.5 120-70.8 120-142V27.5c0-5.6-3.9-10.5-9.4-11.7L208.9.3c-6.5-1.4-12.9 2.6-14.3 9.1l-5.2 23.4c-1.4 6.5 2.6 12.9 9.1 14.3l41.5 9.2v134.4c0 52.9-42.2 96.7-95.1 97.2-53.3.6-96.9-42.6-96.9-95.9V56.4l41.5-9.2c6.5-1.4 10.5-7.8 9.1-14.3L93.4 9.4C92 2.9 85.5-1.1 79.1.3L9.4 15.8C3.9 17 0 21.9 0 27.5V192c0 71.2 52 130.5 120 142zm312-190c17.6 0 32 14.4 32 32s-14.4 32-32 32-32-14.4-32-32 14.4-32 32-32z" fill="currentColor" />
</svg>
</span>
</div>
<!-- CTA Main Text -->
<a href="#" role="menuitem" class="o-cover-link__overlay">
<span class="u-text-bold u-text-uppercase">
Title 2
</span>
<!-- Optional secondary text -->
<span class="u-d-block u-text-small">
Lorem ipsum dolor sit amet
</span>
</a>
</div>
</div>
<div class="c-cta-buttons__item o-grid__item-12 o-grid__item@md">
<div class="c-cta-buttons__container u-p-sm u-d-flex u-f-align-center u-f-justify-center o-cover-link">
<!-- Optional icon -->
<div class="c-cta-buttons__img u-m-r">
<span class="o-svg-icon">
<svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
<path d="M256 0C149.9 0 64 86 64 192c0 71.1 24 93.3 151.3 297.4 18.8 30.1 62.7 30.1 81.5 0C424.1 285.2 448 263.1 448 192 448 85.9 362 0 256 0zm0 464C128.6 259.7 112 246.8 112 192c0-79.5 64.5-144 144-144s144 64.5 144 144c0 54.6-15.2 65.4-144 272zm-80-272c0-44.2 35.8-80 80-80s80 35.8 80 80-35.8 80-80 80-80-35.8-80-80z" fill="currentColor"/>
</svg>
</span>
</div>
<!-- CTA Main Text -->
<a href="#" role="menuitem" class="o-cover-link__overlay">
<span class="u-text-bold u-text-uppercase">
Title 3
</span>
<!-- Optional secondary text -->
<span class="u-d-block u-text-small">
Lorem ipsum dolor sit amet
</span>
</a>
</div>
</div>
</section>Gray Variation
<section role="menu" class="o-grid c-cta-buttons u-text-center c-cta-buttons--gray">
<div class="c-cta-buttons__item o-grid__item-12 o-grid__item@md">
<div class="c-cta-buttons__container u-p-sm u-d-flex u-f-align-center u-f-justify-center o-cover-link">
<!-- Optional icon -->
<div class="c-cta-buttons__img u-m-r">
<span class="o-svg-icon">
<svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
<path d="M484.25 330l-101.59-43.55a45.86 45.86 0 00-53.39 13.1l-32.7 40a311.08 311.08 0 01-124.19-124.12l40-32.7a45.91 45.91 0 0013.1-53.42L182 27.79a45.63 45.63 0 00-52.31-26.61L35.5 22.89A45.59 45.59 0 000 67.5C0 313.76 199.68 512.1 444.56 512a45.58 45.58 0 0044.59-35.51l21.7-94.22a45.75 45.75 0 00-26.6-52.27zm-41.59 134.09C225.08 463.09 49 287 48 69.3l90.69-20.9 42.09 98.22-68.09 55.71c46.39 99 98.19 150.63 197 197l55.69-68.11 98.19 42.11z" fill="currentColor" />
</svg>
</span>
</div>
<!-- CTA Main Text -->
<a href="#" role="menuitem" class="o-cover-link__overlay">
<span class="u-text-bold u-text-uppercase">
Title 1
</span>
<!-- Optional secondary text -->
<span class="u-d-block u-text-small">
Lorem ipsum dolor sit amet
</span>
</a>
</div>
</div>
<div class="c-cta-buttons__item o-grid__item-12 o-grid__item@md">
<div class="c-cta-buttons__container u-p-sm u-d-flex u-f-align-center u-f-justify-center o-cover-link">
<!-- Optional icon -->
<div class="c-cta-buttons__img u-m-r">
<span class="o-svg-icon">
<svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
<path d="M120 334v18c0 88.2 75.4 160 168 160s168-71.8 168-160v-99.7c32.3-10.1 55.7-40.2 56-75.7.3-43.4-34.6-79.6-78.1-80.6-45-1-81.9 35.2-81.9 80 0 35.8 23.5 66.1 56 76.3V352c0 61.8-53.8 112-120 112s-120-50.2-120-112v-18c68-11.5 120-70.8 120-142V27.5c0-5.6-3.9-10.5-9.4-11.7L208.9.3c-6.5-1.4-12.9 2.6-14.3 9.1l-5.2 23.4c-1.4 6.5 2.6 12.9 9.1 14.3l41.5 9.2v134.4c0 52.9-42.2 96.7-95.1 97.2-53.3.6-96.9-42.6-96.9-95.9V56.4l41.5-9.2c6.5-1.4 10.5-7.8 9.1-14.3L93.4 9.4C92 2.9 85.5-1.1 79.1.3L9.4 15.8C3.9 17 0 21.9 0 27.5V192c0 71.2 52 130.5 120 142zm312-190c17.6 0 32 14.4 32 32s-14.4 32-32 32-32-14.4-32-32 14.4-32 32-32z" fill="currentColor" />
</svg>
</span>
</div>
<!-- CTA Main Text -->
<a href="#" role="menuitem" class="o-cover-link__overlay">
<span class="u-text-bold u-text-uppercase">
Title 2
</span>
<!-- Optional secondary text -->
<span class="u-d-block u-text-small">
Lorem ipsum dolor sit amet
</span>
</a>
</div>
</div>
<div class="c-cta-buttons__item o-grid__item-12 o-grid__item@md">
<div class="c-cta-buttons__container u-p-sm u-d-flex u-f-align-center u-f-justify-center o-cover-link">
<!-- Optional icon -->
<div class="c-cta-buttons__img u-m-r">
<span class="o-svg-icon">
<svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
<path d="M256 0C149.9 0 64 86 64 192c0 71.1 24 93.3 151.3 297.4 18.8 30.1 62.7 30.1 81.5 0C424.1 285.2 448 263.1 448 192 448 85.9 362 0 256 0zm0 464C128.6 259.7 112 246.8 112 192c0-79.5 64.5-144 144-144s144 64.5 144 144c0 54.6-15.2 65.4-144 272zm-80-272c0-44.2 35.8-80 80-80s80 35.8 80 80-35.8 80-80 80-80-35.8-80-80z" fill="currentColor"/>
</svg>
</span>
</div>
<!-- CTA Main Text -->
<a href="#" role="menuitem" class="o-cover-link__overlay">
<span class="u-text-bold u-text-uppercase">
Title 3
</span>
<!-- Optional secondary text -->
<span class="u-d-block u-text-small">
Lorem ipsum dolor sit amet
</span>
</a>
</div>
</div>
</section>