SU-SWS/stanford_profile_helper

{#
/**
 * @file
 * Hero Component
 *
 * A big graphic for use as a focal point or a large video.
 *
 * Available variables:
 * - attributes: For additional HTML attributes not already provided.
 * - modifier_class: Additional CSS classes to change look and behavior.
 * - hero_media: iframe or HTML5 video players.
 * - hero_image: A full HTML entity for an image. Can be img or picture.
 * - hero_super_headline: Text super headline.
 * - hero_headline: Text headline.
 * - hero_body: An open variable for anything. Generally this would be for
 *     WYSIWYG editor contents.
 * - hero_link: The href value for the link in the hero component.
 * - hero_cta_attributes: Any html attributes on the cta link that need to be
 *     added. For example: _target.
 * - hero_cta_label: The clickable text for the CTA link.
 * - hero_button_label: The text label of the button component.
 * - hero_content: An open area for content to go beneath the media when using
 *                 the su-hero--caption variant.
 */
#}

{#
  Template Include Paths
  Override these if you want to include a different template.
#}
{%- if template_path_card is empty -%}
  {%- set template_path_card = "@decanter/components/card/card.twig" -%}
{%- endif -%}

<div{{ attributes }} class="su-hero {{ modifier_class }}">

  {# Hero Image or Video #}
  {% block heromedia %}
  {% if hero_media is not empty or hero_image is not empty %}
  <div class="su-hero__media">
    {% if 'su-hero--youtube' in modifier_class %}
    {# Support for: iframe #}
    {{ hero_media }}
    {% else %}
    {# Support for: img or picture #}
    {{ hero_image}}
    {% endif %}
  </div>
  {% endif %}
  {% endblock %}

  {# Only include the card template if there is content to render. #}
  {%- block herocontent -%}
  {%- if
    hero_super_headline is not empty or
    hero_headline is not empty or
    hero_body is not empty or
    hero_link is not empty
  -%}
    {# We reuse the card component here. #}
    {% include template_path_card with
      {
        "modifier_class": "su-hero__card",
        "card_super_headline": hero_super_headline,
        "card_headline": hero_headline,
        "card_body": hero_body,
        "card_link": hero_link,
        "card_button_label": hero_button_label,
        "card_cta_label": hero_cta_label,
        "card_cta_attributes": hero_cta_attributes,
        "card_headline_tag": card_headline_tag,
        "card_headline_attributes": card_headline_attributes
      }
      only
    %}
  {%- endif -%}
  {%- if hero_content is not empty -%}
  <div class="su-hero__content">
    <div class="su-hero__content-inner">
      {{ hero_content }}
    </div>
  </div>
  {%- endif -%}
  {%- endblock -%}
</div>