zdoc/layouts/partials/main/landing/section-normal.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 .body }}
    <div class="section__normal">
      {{ $body := . }}
      {{ if or (eq .imagePosition "left") (not .imagePosition) }}
        {{ with .image }}
          <div class="section__normal--img-wrapper" data-position="{{ $body.imagePosition | default "left" }}">
            <img data-src="{{ . | relURL }}" alt="{{ $body.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__normal--img"/>
          </div>
        {{ end }}
      {{ end }}

      <div>
        {{ with .subtitle }}
          <div class="section__normal--subtitle" style="font-size:{{ with $headerFontSize }}{{ sub (int .) 4 }}px;{{ end }} color:{{ $body.color | default "#fff" }}; text-align: {{ $body.subtitlePosition | default "center" }}">
            {{ . }}
          </div>
        {{ end }}
        {{ with .description }}
          <div class="section__normal--content" style="color: {{ $.color | default "#fff" }};">
            {{ . | markdownify }}
          </div>
        {{ end }}
      </div>

      {{ if eq .imagePosition "right" }}
        {{ with .image }}
          <div class="section__normal--img-wrapper" data-position="{{ $body.imagePosition }}">
            <img data-src="{{ . | relURL }}" alt="{{ $body.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__normal--img"/>
          </div>
        {{ end }}
      {{ end }}
    </div>
  {{ end }}
</div>