ux: add "image" card layout

This change to the cards partial adds support for an alternate layout.

The layout to use is decided based on the input parameter used to
generate the card:

- If an `image` is given, the new "tall image" layout is used
- If an `icon` is given, the default layout is used

Image and icon are mutually exclusive.

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>

content/trusted-content/_index.md

@@ -5,15 +5,15 @@ keywords: doi, dvp, dsos, open source, security, base images
 grid:
 - title: Docker Official Images
   description: A curated set of Docker repositories hosted on Docker Hub.
-  image: /trusted-content/images/doi-icon.svg
+  icon: /trusted-content/images/doi-icon.svg
   link: /trusted-content/official-images/
 - title: Docker Verified Publisher
   description: High-quality images from verified vendors.
-  image: /trusted-content/images/dvp-icon.svg
+  icon: /trusted-content/images/dvp-icon.svg
   link: /trusted-content/dvp-program/
 - title: Docker-Sponsored Open Source
   description: High-quality images from non-commercial open source projects.
-  image: /trusted-content/images/dsos-icon.svg
+  icon: /trusted-content/images/dsos-icon.svg
   link: /trusted-content/dsos-program/
 ---
 

layouts/partials/components/card.html

@@ -1,31 +1,54 @@
+{{ if (and .image .icon) }}
+  {{ errorf "card: don't use both image and icon: %s" . }}
+{{ end }}
 <div class="not-prose overflow-x-hidden">
   {{ if .link }}
-    <a class="h-full" href="{{ .link }}">
+  <a class="h-full" href="{{ .link }}">
-  {{ end }}
+    {{ end }}
-    <div
+    <div class="h-full bg-white rounded-sm
-      class="h-full bg-white flex flex-col gap-2 rounded-sm p-4
              border border-gray-light-100 drop-shadow-sm dark:bg-gray-dark-200 dark:border-gray-dark-400
              {{ if .link }}hover:drop-shadow-lg hover:border-gray-light-200 hover:dark:border-gray-dark{{ end }}">
-      <div class="flex gap-4 items-center">
+      {{ if .image }}
-        {{ if .image }}
+      {{/* use the "tall image" layout */}}
-          <img class="w-[32px]" src="{{ .image }}" alt="">
+      <div class="flex gap-2 items-stretch">
-        {{ else if .icon }}
+        <div class="basis-1/3">
-          <span
+          <img class="h-full w-full object-cover" src="{{ .image }}" alt="">
-            class="material-symbols-rounded text-[32px]"
+        </div>
-            >{{ .icon }}</span
+        <div class="basis-2/3 flex flex-col gap-2 p-4">
-          >
+          <div class="text-xl text-gray-light-800 leading-snug dark:text-white flex gap-2">
-        {{ end }}
-        <div>
-          <div class="text-xl text-gray-light-800 leading-snug dark:text-white flex items-center gap-2">
             {{ markdownify .title }}
           </div>
+          <div class="text-gray-light-500 leading-snug dark:text-gray-dark-700">
+            {{ .description | markdownify }}
+          </div>
         </div>
       </div>
-      <div class="text-gray-light-500 leading-snug dark:text-gray-dark-700">
+      {{ else }}
-        {{ .description | markdownify }}
+      {{/* use the default layout */}}
+      <div class="flex flex-col gap-2 p-4">
+        <div class="flex gap-4 items-center">
+          {{ with .icon }}
+            {{ if strings.ContainsAny . "/." }}
+            {{/* image file */}}
+            <img class="w-[32px]" src="{{ . }}" alt="">
+            {{ else }}
+            {{/* icon ligature */}}
+            <span class="material-symbols-rounded text-[32px]">{{ . }}</span>
+            {{ end }}
+          {{ end }}
+          <div>
+            <div class="text-xl text-gray-light-800 leading-snug dark:text-white flex items-center gap-2">
+              {{ markdownify .title }}
+            </div>
+          </div>
+        </div>
+        <div class="text-gray-light-500 leading-snug dark:text-gray-dark-700">
+          {{ .description | markdownify }}
+        </div>
       </div>
+      {{ end }}
     </div>
-  {{ if .link }}
+    {{ if .link }}
-    </a>
+  </a>
   {{ end }}
 </div>