28 lines
1.4 KiB
HTML
28 lines
1.4 KiB
HTML
{{/* section
|
|
label: Hero
|
|
about: The big opening at the top of a page, with buttons.
|
|
fields:
|
|
- { name: eyebrow, type: text, help: A short line above the heading. }
|
|
- { name: heading, type: text, required: true }
|
|
- { name: text, type: markdown }
|
|
- { name: image, type: image, label: Picture, help: Beside the text on wide screens, above it on phones. }
|
|
- { name: image_alt, type: text, label: What the picture shows, help: For people who can't see it. Leave empty only if it's decoration. }
|
|
- name: buttons
|
|
type: list
|
|
fields:
|
|
- { name: text, type: text, required: true }
|
|
- { name: href, type: link, label: Goes to, required: true }
|
|
- { name: primary, type: bool, label: Main button }
|
|
*/}}
|
|
<section class="hero{{ if .Data.image }} with-picture{{ end }}">
|
|
<div class="wrap">
|
|
<div class="hero-text">
|
|
{{ with .Data.eyebrow }}<p class="eyebrow">{{ . }}</p>{{ end }}
|
|
<h1>{{ .Data.heading }}</h1>
|
|
{{ with .Data.text }}<div class="lede">{{ markdownify . }}</div>{{ end }}
|
|
{{ with .Data.buttons }}<p class="actions">{{ range . }}<a class="btn{{ if .primary }} primary{{ end }}" href="{{ .href }}">{{ .text }}</a>{{ end }}</p>{{ end }}
|
|
</div>
|
|
{{ with .Data.image }}<figure class="hero-picture"><img src="{{ . }}" alt="{{ $.Data.image_alt }}"{{ with imageSize . }} width="{{ .w }}" height="{{ .h }}"{{ end }} fetchpriority="high"></figure>{{ end }}
|
|
</div>
|
|
</section>
|