michalvankodev-site/axum_server/templates/components/project_preview_card.html

<article class="border rounded-md bg-white m-4 p-4">
  <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">
      {{project.metadata.description|safe}}
    </section>
  </header>
  <!-- <hr class="border-blue-950 my-5"> -->

  {% match project.metadata.cover_image %}
  {% when Some with (source) %}
  <figure class="mx-4 my-2">
      {% match project.metadata.link %}
      {% when Some with (href) %}
      <a href="{{href}}">
        <img src="{{source}}" class="object-contain w-full aspect-video"/>
      </a>
      {% when None %}
      <img src="{{source}}" />
      {% endmatch %}
		<!-- TODO <figure> -->
  </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>
</article>