web/wp-content/themes/mozilla-builders/templates/components/articles/overline.twig

{% if overline %}

{% if post.color == 'none' %}
  {% set bg_color = overline.color %}
{% else %}
  {% set bg_color = post.color ?: overline.color %}
{% endif %}

{% if bg_color == 'green' %}
  {% set overline_class = 'bg-green' %}
{% elseif bg_color == 'green-light' %}
  {% set overline_class = 'bg-green-light text-black' %}
{% elseif bg_color == 'green-darker' %}
  {% set overline_class = 'bg-green-darker text-white' %}
{% elseif bg_color == 'orange' %}
  {% set overline_class = 'bg-orange text-black' %}
{% elseif bg_color == 'orange-light' %}
  {% set overline_class = 'bg-orange-light text-black' %}
{% elseif bg_color == 'orange-darker' %}
  {% set overline_class = 'bg-orange-darker text-white' %}
{% elseif bg_color == 'pink' %}
  {% set overline_class = 'bg-pink text-black' %}
{% elseif bg_color == 'pink-light' %}
  {% set overline_class = 'bg-pink-light text-black' %}
{% elseif bg_color == 'pink-darker' %}
  {% set overline_class = 'bg-pink-darker text-white' %}
{% elseif bg_color == 'stone' %}
  {% set overline_class = 'bg-stone text-black' %}
{% elseif bg_color == 'yellow' %}
  {% set overline_class = 'bg-yellow text-black' %}
{% elseif bg_color == 'olive' %}
  {% set overline_class = 'bg-olive text-black' %}
{% elseif bg_color == 'olive-dark' %}
  {% set overline_class = 'bg-olive-dark text-white' %}
{% elseif bg_color == 'blue-green' %}
  {% set overline_class = 'bg-blue-green text-black' %}
{% else %}
  {% set overline_class = 'bg-content text-main' %}
{% endif %}

<p class="text-xs uppercase">
  <a class="py-1 px-1.5 hocus:bg-main hocus:text-content {{ overline_class }}" href="{{ overline.link }}">{{ overline.name }}</a>
</p>

{% endif %}