tw-runner/mysite/layouts/shortcodes/article-card.html

Run and manage Tower Website projects with this utility.

<div class="p-4 bg-ground/5 dark:bg-ground-dark/50 sm:py-6 sm:px-10 my-5 sm:border sm:border-gray-100/0 sm:hover:border-ground/15 rounded-2xl sm:hover:shadow-md dark:shadow-amber-200/10 transition-shadow duration-150">
  <div class="grid gap-2 text-center sm:text-left">
    {{ $name := .Get "name" }}
    {{ $description := .Get "description" }}
    {{ with .Site.GetPage "page" (.Get "link") }}
    <a href='{{ .RelPermalink }}'>
      <h3 class="text-[18px] sm:text-[20px] py-1 my-1">{{ $name }}</h3>
    </a>
    <h4 class="text-[25px] sm:text-[28px] py-0 my-0">{{ $description }}</h4>
    <div class="flex flex-col sm:flex-row-reverse">
      <div class="sm:w-3/10 grid place-content-center">
        {{ partial "image" (dict "src" .Params.image "dest" .Params.image "alt" .Title) }}
      </div>
      <div class="sm:w-7/10 grid place-content-center">
        <p class="text-[20px] py-1 my-1">{{ .Summary }}</p>
      </div>
    </div>
    <a href='{{ .RelPermalink }}' class="w-full text-right font-thin underline">Read the full article</a>
    {{ end }}
  </div>
</div>