Styleguide

Icon Teaser 

<section class="py-4 py-lg-5 bg-cool-gray-60">
    <div class="container">
        <div class="row animated fadeInUp">
            <div class="text-center col-sm-12 col-md-12 col-lg-3 col-xl-3">
                <img src="/STATIC/binary/images/global/value-added-services/timocom-value-added-services-discount-white.svg" alt="" class="pb-4" width="100" height="100" />
                <h2 class="wordbreak h4 mb-3 h-sm-2">Mehr sparen</h2>

                <h3 class="wordbreak h5 mb-2 h-sm-4">Sichern Sie sich eine große Anzahl <span class="nowrap">exklusiver</span> Rabatte und Angebote.</h3>

            </div>
            <div class="d-flex justify-content-center text-center col-lg-1 col-xl-1">
                <div class="text-center border-right border-white">
                </div>
            </div>
            <div class="text-center my-4 my-lg-0 col-sm-12 col-md-12 col-lg-3 col-xl-3">
                <img src="/STATIC/binary/images/global/value-added-services/timocom-value-added-services-agnifying-glass-white.svg" alt="" class="pb-4" width="100" height="100" />
                <h2 class="wordbreak h4 mb-3 h-sm-2">Mehr entdecken</h2>

                <h3 class="wordbreak h5 mb-2 h-sm-4">Testen Sie neue Technologien als einer der ersten – <span class="nowrap">kostenlos</span> und unverbindlich.</h3>

            </div>
            <div class="d-flex justify-content-center text-center col-lg-1 col-xl-1">
                <div class="text-center border-right border-white">
                </div>
            </div>
            <div class="text-center col-sm-12 col-md-12 col-lg-3 col-xl-3">
                <img src="/STATIC/binary/images/global/value-added-services/timocom-value-added-services-system-white.svg" alt="" class="pb-4" width="100" height="100" />
                <h2 class="wordbreak h4 mb-3 h-sm-2">Mehr rausholen</h2>

                <h3 class="wordbreak h5 mb-2 h-sm-4">Profitieren Sie direkt im System von den integrierten Sonderleistungen.</h3>

            </div>
        </div>
    </div>
</section>
 
<section class="py-4 py-lg-5 bg-cool-gray-60">
  <div class="container">
    <div class="row animated fadeInUp">
      {{#each item}}
        <div class="{{class}}">
          {{#with image}}
            <img
              src="{{src}}"
              alt="{{alt}}"
              class="pb-4"
              width="100"
              height="100"
            />
          {{/with}}
          {{render "@headline" h2}}
          {{render "@headline" h3}}
        </div>
        {{#unless @last}}
          <div
            class="d-flex justify-content-center text-center col-lg-1 col-xl-1"
          >
            <div class="text-center border-right border-white">
            </div>
          </div>
        {{/unless}}
      {{/each}}
    </div>
  </div>
</section>
 
{
  "item": [
    {
      "class": "text-center col-sm-12 col-md-12 col-lg-3 col-xl-3",
      "image": {
        "src": "/STATIC/binary/images/global/value-added-services/timocom-value-added-services-discount-white.svg",
        "alt": ""
      },
      "h2": {
        "h2": true,
        "class": "wordbreak h4 mb-3 h-sm-2",
        "text": "Mehr sparen"
      },
      "h3": {
        "h3": true,
        "class": "wordbreak h5 mb-2 h-sm-4",
        "text": "Sichern Sie sich eine große Anzahl <span class=\"nowrap\">exklusiver</span> Rabatte und Angebote."
      }
    },
    {
      "class": "text-center my-4 my-lg-0 col-sm-12 col-md-12 col-lg-3 col-xl-3",
      "image": {
        "src": "/STATIC/binary/images/global/value-added-services/timocom-value-added-services-agnifying-glass-white.svg",
        "alt": ""
      },
      "h2": {
        "h2": true,
        "class": "wordbreak h4 mb-3 h-sm-2",
        "text": "Mehr entdecken"
      },
      "h3": {
        "h3": true,
        "class": "wordbreak h5 mb-2 h-sm-4",
        "text": "Testen Sie neue Technologien als einer der ersten – <span class=\"nowrap\">kostenlos</span> und unverbindlich."
      }
    },
    {
      "class": "text-center col-sm-12 col-md-12 col-lg-3 col-xl-3",
      "image": {
        "src": "/STATIC/binary/images/global/value-added-services/timocom-value-added-services-system-white.svg",
        "alt": ""
      },
      "h2": {
        "h2": true,
        "class": "wordbreak h4 mb-3 h-sm-2",
        "text": "Mehr rausholen"
      },
      "h3": {
        "h3": true,
        "class": "wordbreak h5 mb-2 h-sm-4",
        "text": "Profitieren Sie direkt im System von den integrierten Sonderleistungen."
      }
    }
  ]
}

No notes defined.