Academic Excellence Hero

{#

Academic Excellence Hero component

Required variables:
- heading (object)
  - text_before_statistic (string, optional)
  - statistic (string, optional)
  - text_after_statistic (string, optional)
  - text (string, optional)
  If using a statistic, you need to use the `text_before_statistic` and/or `text_after_statistic` fields.
  Otherwise, you can just use the `text` field for a heading without a statistic.)
  - image_url (string) - URL of the image to display in the hero section.
  - image_alt (string) - Alt text for the image.

Optional variables:
- subheading (string) - Subheading text to display below the main heading.
- button_url (string) - URL for the call-to-action button.
- button_text (string) - Text to display on the call-to-action button.
- button_aria_label (string) - ARIA label for the call-to-action button.
- heading_level (integer) - Heading level for the main heading (e.g., 1 for <h1>, 2 for <h2>, etc.).
    If not provided, it defaults to 2.
    Also affects the subheading, if present, by increasing it by 1.

Notes:
- The component's JavaScript will handle superscripting any $, %, or # characters or any ordinals (eg., st, th, rd, nd),
  and applying the appropriate font sizes, resizing them with window resize events.

#}

<section class="bux-academic-excellence__hero">
  <div class="hero__body">
    {% include "@academic-excellence-did-you-know" with { variant: "horizontal" } %}
    <h{% if heading_level %}{{ heading_level }}{% else %}2{% endif %} class="hero__header">
      {% if heading.text_before_statistic %}
        <span class="header__text-before-stat">{{ heading.text_before_statistic }}</span>
      {% endif %}
      {% if heading.statistic %}
        <span class="header__statistic">{{ heading.statistic }}</span>
      {% endif %}
      {% if heading.text_after_statistic %}
        <span class="header__text-after-stat">{{ heading.text_after_statistic }}</span>
      {% endif %}
      {% if heading.text %}
        {{ heading.text }}
      {% endif %}
    </h{% if heading_level %}{{ heading_level }}{% else %}2{% endif %}>
    
    <h{% if heading_level %}{{ heading_level + 1 }}{% else %}3{% endif %} class="hero__subheader">
      {{ subheading }}
    </h{% if heading_level %}{{ heading_level + 1 }}{% else %}3{% endif %}>

    {% include '@link' with {
      base_class: 'hero__cta bux-button bux-button--alt',
      link_url: button_url,
      link_text: button_text,
      attributes: {
        'aria-label': button_aria_label
      },
      show_underline: false
    } only %}
  </div>
  <div class="hero__image-wrapper">
    {% include '@image' with {
      class: 'hero__image',
      image_url: image_url,
      image_alt_text: image_alt,
    } only %}
  </div>
</section>