web/wp-content/themes/mozilla-builders/templates/components/articles/previews/preview--text_only.twig

{% if post.color == 'green' %}
  {% set bg_class = 'bg-green' %}
{% elseif post.color == 'green-light' %}
  {% set bg_class = 'bg-green-light' %}
{% elseif post.color == 'green-darker' %}
  {% set bg_class = 'bg-green-darker text-main' %}
{% elseif post.color == 'orange' %}
  {% set bg_class = 'bg-orange' %}
{% elseif post.color == 'orange-light' %}
  {% set bg_class = 'bg-orange-light' %}
{% elseif post.color == 'orange-darker' %}
  {% set bg_class = 'bg-orange-darker text-main' %}
{% elseif post.color == 'pink' %}
  {% set bg_class = 'bg-pink' %}
{% elseif post.color == 'pink-light' %}
  {% set bg_class = 'bg-pink-light' %}
{% elseif post.color == 'pink-darker' %}
  {% set bg_class = 'bg-pink-darker text-main' %}
{% elseif post.color == 'stone' %}
  {% set bg_class = 'bg-stone' %}
{% elseif post.color == 'yellow' %}
  {% set bg_class = 'bg-yellow' %}
{% elseif post.color == 'olive' %}
  {% set bg_class = 'bg-olive' %}
{% elseif post.color == 'olive-dark' %}
  {% set bg_class = 'bg-olive-dark text-main' %}
{% elseif post.color == 'blue-green' %}
  {% set bg_class = 'bg-blue-green' %}
{% else %}
  {% set bg_class = 'bg-content text-main' %}
{% endif %}

{% set size = size|default('md') %}

<div class="relative {{ bg_class }} {{ class|default('min-h-96') }} p-4 flex-1 flex flex-col justify-between items-center">
  <h3 class="{{ size == 'md' ? 'type-headline-lg' : 'type-headline-2xl md:type-headline-xl' }} text-center text-balance leading-tighter">
    <a class="before:absolute before:inset-0 before:z-10 hocus:before:shadow-inner" href="{{ post.link }}">{{ post.title }}</a>
  </h3>

  <div class="relative my-3 z-20">
    {% include 'components/articles/overline.twig' with { overline: post.categories[0], color: post.color } %}
  </div>

  <p class="{{ size == 'md' ? 'type-sans-sm' : 'type-sans-md' }} text-center text-balance">{{ post.subtitle }}</p>
</div>