Heading: Level 5

{% apply spaceless %}
  {% set classes = ['azalea-heading', 'font-heading'] %}
  {# Prop: spacing #}
  {% if spacing is same as(5) %}
    {% set classes = classes|merge(['mb-4 md:mb-5 lg:mb-6']) %}
  {% elseif spacing is same as(4) %}
    {% set classes = classes|merge(['mb-3 md:mb-4 lg:mb-5']) %}
  {% elseif spacing is same as(3) %}
    {% set classes = classes|merge(['mb-2 md:mb-3 lg:mb-4']) %}
  {% elseif spacing is same as(2) %}
    {% set classes = classes|merge(['mb-1 md:mb-2 lg:mb-3']) %}
  {% elseif spacing is same as(1) %}
    {% set classes = classes|merge(['mb-1 md:mb-2 lg:mb-3']) %}
  {% endif %}
  {# Prop: as #}
  {% if as and as in ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] %}
    {% set tag = as %}
  {% else %}
    {# Custom styles when not explicitly setting an HTML "heading" element #}
    {% set tag = 'div' %}
    {# Prop: fontWeight #}
    {% if fontWeight and fontWeight in ['thin', 'extralight', 'light', 'normal', 'semibold', 'bold', 'extrabold'] %}
      {% set classes = classes|merge(['font-' ~ fontWeight]) %}
    {% else %}
      {% set classes = classes|merge(['font-semibold']) %}
    {% endif %}
    {# Prop: fontSize #}
    {% if fontSize == 'xlarge' %}
      {% set classes = classes|merge(['azalea-heading-level-1']) %}
    {% elseif fontSize == 'large' %}
      {% set classes = classes|merge(['azalea-heading-level-2']) %}
    {% elseif fontSize == 'medium' %}
      {% set classes = classes|merge(['azalea-heading-level-3']) %}
    {% elseif fontSize == 'small' %}
      {% set classes = classes|merge(['azalea-heading-level-4']) %}
    {% elseif fontSize == 'xsmall' %}
      {% set classes = classes|merge(['azalea-heading-level-5']) %}
    {% else %}
      {% set classes = classes|merge(['azalea-heading-level-3']) %}
    {% endif %}
  {% endif %}
  {# Prop: text #}
  <{{ tag }} id="{{ id }}" class="{{ classes|join(' ') }}">
    {{ text }}
    {% block content %}{% endblock content %}
  </{{ tag }}>
{% endapply %}