Example card component: Allegato

<article
  class="n7-card{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock %}
  {% if hasSideThumb %} md:grid-cols-[min-content_1fr]{% endif %}
  {% block fullClickable %}{% if fullClick %} is-card-fullclickable transition hover:shadow-lg group{% endif %}{% endblock fullClickable %}"
>
  {% if thumb %}
  <div class="n7-card__image{% if thumbSize %} {{ thumbSize }}{% endif %}
  {% if thumbAspectRatio %} {{ thumbAspectRatio }}{% endif %}">
    <img
      class="{% if img.imgObjectFit %}{{ img.imgObjectFit }}{% else %}object-cover{% endif %} w-full h-full"
      alt="{{ img.alt }}"
      src="{{ img.path }}"
    />
  </div>
  {% endif %}
  {% if icon %}
    <div class="{% if iconSize %}{{ iconSize }}{% endif %} p-6{% if iconRadius %} {{ iconRadius }}{% else %} rounded{% endif %} {% if iconBg %} {{ iconBg }}{% else %}n7-background-gray-02{% endif %}">
     {% render '@icon', { id: icon }, true %}
    </div>
  {% endif %}
  <div class="grid{% if contentGap %} {{ contentGap }}{% else %} gap-4{% endif %}">
    <div class="n7-card__heading flex flex-col-reverse{% if headingGap %} {{ headingGap }}{% else %} gap-4{% endif %}">
      <h3 class="n7-card__title {{ headingClasses }}">
        <a class="hover:underline{% if fullClick %} group-hover:underline{% endif %}" href="">
          {{ heading | safe }}
          {% block fileDetails %}
            {% if fileDetails %}<span class="flex gap-0.5 items-center pt-1 md:pt-2 text-sm md:text-base font-medium n7-content-03">
              {% render '@icon', { id: 'outline--document-text', size: 'w-4 h-4 md:w-5 md:h-5' }, true %}<span class="sr-only">, </span>PDF - 120Kb
            </span>
            {% endif %}
          {% endblock fileDetails %}
          {% if ctaLink %}<span class="sr-only">: Read more</span>{% endif %}
        </a>
      </h3>
      {% if category or date %}
        <div class="flex items-baseline justify-between">
          {% if category %}
          <div class="n7-card__categories">
            {% render '@category--overline', { text: categoryText, classes: 'n7-content-placeholder'}, true %}
          </div>
          {% endif %}
          {% if date %}
          <div class="n7-card__date text-sm">
            <time datetime="2023-09-30">30.09.2023</time>
          </div>
          {% endif %}
        </div>
      {% endif %}
    </div>

    {% block content %}
      {% if 'is-empty' not in excerpt %}
        <p class="n7-card__excerpt {{ excerptClasses }}">
           {% if excerpt %}{{ excerpt | safe }}{% else %}Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.{% endif %}
        </p>
      {% endif %}
    {% endblock %} 

    {% if ctaLink %}
     {% render '@link--has-icon', { hasIcon: 'true', icon: ctaIcon, label: 'Read more', allyHidden: 'true' } %} 
    {% endif %}

    {% if cta %}
        <div class="">
        {% if fullClick %} 
        {% render '@button', { span: true, classes:'cursor-pointer', label: 'Card Cta'} %} 
        {% else %} 
        {% render '@button', { href:'#', classes: 'cursor-pointer', label: 'Card Cta'} %} 
        {% endif %}
        </div>
    {% endif %}
    {% if tags %}
      <ul class="flex gap-2 flex-wrap mt-auto" aria-label="Categorie">
        {% for i in range(0,4) %}
        <li>{% render '@chip--sm' %}</li>
        {% endfor %}
      </ul>
    {% endif %}
  </div>
</article>