{%- if context %}
  {% set id = context.id %}

  {% set vf_intro_heading = context.vf_intro_heading %}

  {% set vf_intro_phase = context.vf_intro_phase %}
  {% set vf_intro_heading_href = context.vf_intro_heading_href %}

  {% set vf_intro_badge = context.vf_intro_badge %}

  {% set vf_intro_subheading = context.vf_intro_subheading %}
  {% set vf_intro_lede = context.vf_intro_lede %}

  {% set vf_intro_text = context.vf_intro_text %}
  {% set intro_text = context.intro_text %}
{% endif -%}
<section class="vf-intro"
  {%- if intro_stack_spacing %} style="--vf-intro-spacing: {{intro_stack_spacing}}"{%- endif -%}
  {%- if id %} id="{{id}}"{% endif -%}
>

  <div><!-- empty --></div>

  <div class="vf-stack">

  <h1 class="vf-intro__heading {% if (vf_intro_phase) or (vf_intro_badge) %}vf-intro__heading--has-tag{% endif %}">
  {{- vf_intro_heading -}}

  {%- if (vf_intro_phase) and (vf_intro_badge) -%}
  <h2 style="color: var(--vf-ui-color--red)">Please use the relevant <code>vf-badge</code> yaml only</h2>
  {%- endif -%}

  {%- if (vf_intro_phase) %}
    {%- if (vf_intro_heading_href) %}
      <a href="{{- intro_heading_href -}}" class="vf-badge vf-badge--primary">{{- vf_intro_phase -}}</a>
    {%- else -%}
      <span class="vf-badge vf-badge--primary">{{- vf_intro_phase -}};</span>
    {%- endif -%}
  {%- endif -%}
  {%- if vf_intro_badge -%}
    {% set badge = '@vf-badge' %}
    {% render badge, { 'context': vf_intro_badge } %}
  {%- endif -%}
  </h1>


  {%- if (vf_intro_lede) and (vf_lede_text) -%}
  <h2 style="color: var(--vf-ui-color--red)">Please use the relevant <code>vf_intro_lede</code> yaml only</h2>
  {%- endif -%}

  {% if vf_intro_subheading %}
  <h2 class="vf-intro__subheading">{{vf_intro_subheading}}</h2>
  {% endif %}

  {% if vf_intro_lede %}
    {%- render '@vf-lede', {"vf_lede_text": vf_intro_lede} -%}
  {% endif %}

  {% if vf_lede_text %}
    {%- render '@vf-lede', {"vf_lede_text": vf_intro_lede} -%}
  {% endif %}

  {% if vf_intro_text %}
    {%- asyncEach intro_text in vf_intro_text -%}
      <p class="vf-intro__text">{{- intro_text | safe -}}</p>
    {%- endeach -%}
  {% endif %}

  </div>
</section>