Tag: Small

{% apply spaceless %}
  {% set classes = ['azalea-tag', 'uppercase'] %}
  {# Prop: size #}
  {% if size == 'xlarge' %}
    {% set classes = classes|merge(['text-2xl', 'md:text-xl', 'leading-normal', 'font-light']) %}
  {% elseif size == 'large' %}
    {% set classes = classes|merge(['azalea-text-lg']) %}
  {% elseif size == 'small' %}
    {% set classes = classes|merge(['azalea-text-sm']) %}
  {% elseif size == 'xsmall' %}
    {% set classes = classes|merge(['text-sm', 'md:text-base', 'leading-normal', 'font-light']) %}
  {% else %}
    {% set classes = classes|merge(['azalea-text-md']) %}
  {% endif %}
  {# Prop: contrast #}
  {% if contrast == 'light' %}
    {% set classes = classes|merge(['text-tertiary-300']) %}
  {% else %}
    {% set classes = classes|merge(['text-tertiary-700']) %}
  {% endif %}
  {# Prop: as #}
  {% if as and as in ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'] %}
    {% set tag = as %}
  {% else %}
    {% set tag = 'div' %}
  {% endif %}
  <{{ tag }} class="{{ classes|join(' ') }}">
    {# Prop: text #}
    {{ text }}
    {% block content %}{% endblock %}
  </{{ tag }}>
{% endapply %}