Skip to main content

Main Content

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>