michalvankodev-site/templates/components/project_preview_card.html

<section class="border rounded-md bg-white p-4 break-inside-avoid" style="view-transition-name: project_preview_{{project.slug}};">
  <header class="px-4 mb-3"> 
    <h2 class="text-xl font-semibold text-blue-900 md:text-2xl">
      {% match project.metadata.link %}
      {% when Some with (href) %}
      <a href="{{href}}" class="text-blue-900 no-underline">
        {{project.metadata.title}}
      </a>
      {% when None %}
      {{project.metadata.title}}
      {% endmatch %}
    </h2>
    <section class="description text-slate-800 my-2 md:text-xl text-justify leading-tight md:leading-tight">
      {{project.body|parse_markdown|safe}}
    </section>
  </header>
  <!-- <hr class="border-blue-950 my-5"> -->

  {% match project.metadata.cover_image %}
  {% when Some with (source) %}
  {% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 420, 236, "Project cover", Some("max-h-[236px]")).unwrap_or("cover not found".to_string()) %}
  <figure class="mx-4 my-2 flex justify-center">
      {% match project.metadata.link %}
      {% when Some with (href) %}
      <a href="{{href}}">
       {{picture|safe}}
      </a>
      {% when None %}
       {{picture|safe}}
      {% endmatch %}
  </figure>
  {% when None %}
  {% endmatch %}


	<footer class="text-sm px-4 md:text-base">
    <h3 class="text-xl font-semibold text-blue-900 my-2 md:text-2xl">
      {{crate::projects::project_model::translate_classification(project.metadata.classification)}}
    </h3>
    <ul class="inline-block">
     {% for tag in project.metadata.tags %}
      <li class="inline-block text-pink-950">
        {{tag}}
      </li>
      {% endfor %}
    </ul>
	</footer>
</section>