Skip to main content

Main Content

CTA

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>