23 lines
1.2 KiB
HTML
23 lines
1.2 KiB
HTML
{{/*
|
|
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 }}
|