move to top banner

layouts/partials/sections/cards.html

@@ -0,0 +1,22 @@
+{{/*
+  A grid of cards: `items`, each with `title`, `body`, optional `label`
+  (a small tag above the title), `image`, and `link` (+ `linktext`).
+  Without an image, `visual: true` draws a gradient panel in its place.
+*/}}
+{{ $s := . }}
+{{ partial "sections/head.html" $s }}
+<ul class="card-grid{{ with $s.columns }} cols-{{ . }}{{ end }}">
+  {{ range $i, $c := $s.items }}
+  <li class="card{{ if or $c.image $s.visual }} has-visual{{ end }}">
+    {{ with $c.image }}<img class="card-visual" src="{{ . | relURL }}" alt="" loading="lazy">
+    {{ else }}{{ if $s.visual }}<span class="card-visual card-art" style="--i:{{ $i }}" aria-hidden="true"></span>{{ end }}{{ end }}
+    <div class="card-body">
+      {{ with $c.label }}<span class="card-label">{{ . }}</span>{{ end }}
+      <h3 class="card-title">{{ $c.title | markdownify }}</h3>
+      {{ with $c.body }}<p class="card-text">{{ . | markdownify }}</p>{{ end }}
+      {{ with $c.link }}<a class="more card-link" href="{{ . | relURL }}">{{ replaceRE `\s*[→↗]\s*$` "" ($c.linktext | default "Learn more") }}<span class="arrow" aria-hidden="true">→</span></a>{{ end }}
+    </div>
+  </li>
+  {{ end }}
+</ul>
+{{ if $s.ctas }}<div class="cta-row">{{ partial "sections/ctas.html" $s.ctas }}</div>{{ end }}