{#
/**
 * @file
 * CTA Component.
 *
 * Call to action component with clickable image and button.
 *
 * Variants:
 * - .su-cta--button-bottom - Full-width button under the image
 * - .su-cta--button-center - Button at the center of the image
 * - .su-cta--button-bottom-icon - Full-width button under the image with an icon in the center of the image
 *
 * Available variables:
 * - attributes: For additional HTML attributes not already provided.
 * - modifier_class: Additional css classes to change look and behaviour.
 * - image_src: The href property of the image.
 * - image_alt: Alt text for the image.
 * - link: The href property of the CTA.
 * - button_text: The text label of the button.
 * - icon_src: The href property of the icon image.
 * - icon_alt: Alt text for the icon image.
 */
#}
<a {{- attributes }} href="{{ link|default("https://stanford.edu") }}" class="su-cta {{ modifier_class }}">
  <img src="{{ image_src|default("/kss-assets/hero-banner.jpg") }}" alt="{{ image_alt|default("Alt text for image") }}" class="su-cta__img" />
  {# CTA icon #}
  {%- if icon_src is not empty -%}
    <img src="{{ icon_src }}" alt="{{ icon_alt|default("Alt text for icon") }}" class="su-cta__icon" role="presentation" />
  {% endif -%}
  <h2 class="su-cta__button">{{ button_text|default("Button text") }}</h2>
</a> <!-- cta end -->
