29 lines
1.1 KiB
HTML
29 lines
1.1 KiB
HTML
{{/* Product card partial */}}
|
|
<a href="{{ .RelPermalink }}" class="product-card">
|
|
<div class="product-card__image">
|
|
{{ with .Params.hero_image }}
|
|
<img src="{{ . }}" alt="{{ $.Title }}" loading="lazy">
|
|
{{ else }}
|
|
<div class="product-card__image-placeholder">{{ .Title }}</div>
|
|
{{ end }}
|
|
</div>
|
|
<div class="product-card__body">
|
|
<div class="product-card__type">{{ .Params.product_type | default "balm" | humanize }}</div>
|
|
<h3 class="product-card__title">{{ .Title }}</h3>
|
|
<p class="product-card__summary">{{ .Params.short_summary | default .Summary }}</p>
|
|
{{ with .Params.benefit_chips }}
|
|
<div class="product-card__chips">
|
|
{{ range . }}
|
|
<span class="product-card__chip">{{ . }}</span>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
<div class="product-card__footer">
|
|
<span class="product-card__status product-card__status--{{ .Params.status | default "inquiry" }}">
|
|
{{ if eq .Params.status "coming_soon" }}Coming Soon{{ else if eq .Params.status "active" }}Available{{ else }}Inquire{{ end }}
|
|
</span>
|
|
<span class="btn btn--ghost">Learn more →</span>
|
|
</div>
|
|
</div>
|
|
</a>
|