zdoc/layouts/partials/main/landing/section-card.html

{{ $headerFontSize := 32 }}
<div class="section__card" style="color: {{ .color | default "#fff" }}">
  {{ with .header }}
    {{ $headerFontSize = .fontSize }}
    {{ $header := . }}
    <header class="section__card--header">
      {{ with .title }}
        <h2 class="section__card--title" style="font-size:{{ $header.fontSize }}px; color:{{ $header.color | default "#fff" }};">{{ . }}</h2>
      {{ end }}
      {{ with .hlcolor }}
        <div class="section__highlight" style="width: {{ $header.width | default "220" }}px; background-color: {{ . | default "transparent" }};"></div>
      {{ end }}
    </header>
  {{ end }}
  {{ with .description }}
    <div class="section__card--main section__card--content" style="color: {{ $.color | default "#fff" }};">
      {{ . | markdownify }}
    </div>
  {{ end }}
  {{ with .cards }}
    <div class="section__card--main">
      {{ range . }}
        {{ $card := . }}
        <div class="section__card--item">
          {{ with .image }}
            <div class="section__card--img-wrapper">
              <img data-src="{{ . | relURL }}" alt="{{ $card.subtitle | default "section image" }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload section__card--img"/>
            </div>
          {{ end }}
          <div class="section__card--submain">
            {{ with .subtitle }}
              <div class="section__card--subtitle" style="font-size:{{ with $headerFontSize }}{{ sub (int .) 4 }}px;{{ end }} color:{{ $card.color | default "#fff" }}; text-align: {{ $card.subtitlePosition | default "center" }}">
                {{ . }}
              </div>
            {{ end }}
            {{ with .description }}
              <div class="section__card--content" style="color: {{ $card.color | default "#fff" }};">
                {{ . | markdownify }}
              </div>
            {{ end }}
            {{ with .button }}
              <a href="{{ .link }}" class="section__card--item" target="{{ .target }}" rel="{{ if eq .target "_blank" }}noreferrer{{ end }}" data-mobile="true">
                <button class="section__btn section__btn--{{ .size }}" style="background-color: {{ .bgcolor | default "#000" }}; color: {{ .color | default "#fff" }};">{{ .name }}</button>
              </a>
            {{ end }}
          </div>
        </div>
      {{ end }}
    </div>
  {{ end }}
  {{ with .cards }}
    <div class="section__card--main" data-mobile="false">
      {{ range . }}
        {{ if .button }}
          {{ with .button }}
            <a href="{{ .link }}" class="section__card--item" target="{{ .target }}" rel="{{ if eq .target "_blank" }}noreferrer{{ end }}">
              <button class="section__btn section__btn--{{ .size }}" style="background-color: {{ .bgcolor }}; color: {{ .color }};">{{ .name }}</button>
            </a>
          {{ end }}
        {{ else }}
          <div class="section__card--item"></div>
        {{ end }}
      {{ end }}
    </div>
  {{ end }}
</div>