cooked/templates/recipe_card.html

<a class="card hover:shadow-lg transition ease-linear transform hover:scale-105 shrink-0 grow-0 w-full md:w-[225px] lg:w-[400px]" href="/recipe/{{id}}">
    <img src={{ image_url }} alt="noodles" class="w-full h-32 md:h-48 object-cover rounded-xl">
    <div class="m-4">
        <span class="font-bold">{{title}}</span>
        {% match author %}
        {% when Some with (author) %}
        <span class="block text-gray-500 text-sm">{{author}}</span>
        {% when None %}
        {% endmatch %}
    </div>
        {% match time %}
        {% when Some with (time) %}
    <div class="badge flex gap-2 p-4">
        <svg class="w-5 inline-block" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span>{{time|duration}}</span>
    </div>
        {% when None %}
        {% endmatch %}
</a>