website/layouts/observability/list.html

{{ define "main" }}

{{ with .Params.section1}}
<section class='section-1 bg-cover' style='background-image: url("{{ .image }}");'>
  <div class="title-div common-layout">
    <h1 class="title-h1">{{ .title }}</h1>
    <p class="common-p">{{ .content }}</p>
  </div>
</section>
{{ end }}

<section class="section-2">
  {{ with .Params.section2 }}
  <div class="common-layout">
    <h2 class="title-black-h2">{{ .title }}</h2>
    <ul>
      {{ range .list }}
      <li class="common-flex-layout">
        <div>
          <h3 class="title-black-h3">{{ .title }}</h3>
          {{ if .summary }}
          <p class="common-p">{{ .summary }}</p>
          {{ end }}
          {{ if .contentList }}
          <ul>
            {{ range .contentList}}
            <li class="common-li">{{ .content | safeHTML }}</li>
            {{ end }}
          </ul>
          {{ end }}
        </div>
        <img src="{{ .image }}" alt="">
      </li>
      {{ end }}
    </ul>
  </div>
  {{ end }}
</section>

<section class="section-3">
  {{ with .Params.section3 }}
  <img class="bg-left" src="{{ .bgLeft }}" alt="">
  <img class="bg-right" src="{{ .bgRight }}" alt="">
  <div class="common-layout">
    <h2 class="title-black-h2">{{ .title }}</h2>
    <img src="{{ .image }}" alt="">
    <p class="common-p">{{ .content }}</p>
    <a href="{{ .link }}"><button class="common-btn">{{ .btnContent }}</button></a>
  </div>
  {{ end }}
</section>
{{ end }}