article-compact-card.component.html

<a [routerLink]="['/', article().slug] | alLocalize">
  <article
    class="relative h-full overflow-hidden rounded-lg bg-black bg-cover bg-no-repeat transition-transform hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100"
    [attr.aria-labelledby]="article().slug"
  >
    <img
      alt=""
      class="absolute h-auto w-full bg-contain opacity-20"
      [ngSrc]="article().featuredImageUrl || 'assets/article-placeholder.webp'"
      [priority]="imagePriority()"
      width="1215"
      height="750"
    />
    <div class="relative flex h-full flex-col justify-between text-[#fff]">
      <div
        class="hover:bg-al-bottom-radial-gradient absolute h-full w-full"
      ></div>

      <div class="flex items-center justify-between px-6 pt-6">
        <div class="flex items-center gap-2 max-md:self-start">
          <al-avatar [imageSrc]="article().author.avatarUrl" size="32" />
          <span class="text-sm/[14px] font-medium">
            {{ article().author.name }}
          </span>
        </div>

        <div
          class="flex flex-col items-center justify-end gap-6 gap-y-4 md:flex-row"
        >
          <span class="flex w-full flex-row items-center justify-end gap-2">
            <fast-svg name="clock" size="16" />
            <time
              class="text-sm/[14px]"
              [attr.datetime]="'PT' + article().readingTime + 'M'"
            >
              {{ article().readingTime }}min
            </time>
          </span>
        </div>
      </div>

      <div class="flex flex-col px-6 pb-6 pt-8">
        <h3 class="line-clamp-2 text-2xl font-bold" [id]="article().slug">
          {{ article().title }}
        </h3>
        <p class="line-clamp-2 text-base">
          {{ article().excerpt }}
        </p>
      </div>
    </div>
  </article>
</a>