CTA
SCSS Source: core/src/scss/components/cta/_cta.scss
Twig Source: core/src/templates/components/cta/cta.twig
Description
A call-to-action block.
Default Style
Example Markup
<a href="https://stanford.edu" class="su-cta [ modifier_class ]">
<img src="https://placeimg.com/2000/1333/any" alt="Alt text for CTA" class="su-cta__img" />
<img src="/dist/assets/alert-info.svg" alt="Alt text for icon" class="su-cta__icon" role="presentation" />
<h2 class="su-cta__button">Button text</h2>
</a>
Style Variants
.su-cta--button-bottom-icon
Icon centered on image link with button underneath
Example Markup
<a href="https://stanford.edu" class="su-cta su-cta--button-bottom-icon">
<img src="https://placeimg.com/2000/1333/any" alt="Alt text for CTA" class="su-cta__img" />
<img src="/dist/assets/alert-info.svg" alt="Alt text for icon" class="su-cta__icon" role="presentation" />
<h2 class="su-cta__button">Button text</h2>
</a>
.su-cta--button-center
Button centered on image link
Example Markup
<a href="https://stanford.edu" class="su-cta su-cta--button-center">
<img src="https://placeimg.com/2000/1333/any" alt="Alt text for CTA" class="su-cta__img" />
<img src="/dist/assets/alert-info.svg" alt="Alt text for icon" class="su-cta__icon" role="presentation" />
<h2 class="su-cta__button">Button text</h2>
</a>