Barmer Fractal

Teaser Collections: Seals 

<div class="o-teaser-collection teaser-collection--seals js-teaser-targeting-init cs--a" id="seals">

    <h3 class="teaser-collection__headline teaser-collection__headline--h4">Top-Krankenversicherung</h3>

    <div class="teaser-collection__text">
        <p>Du konzentrierst dich auf deine Ausbildung, wir kümmern uns um deine Gesundheit,. Die Barmer wurde als "Top Krankenkasse für junge Leute" (FOCUS MONEY 21/2020) ausgezeichnet. "Sehr gute digitale Leistungen" heißt es in der Auszeichnung - und das stimmt: Wir sind immer für dich da, wenn du uns brauchst.</p>

    </div>

    <div class="teaser-collection__teaser-wrapper">
        <a href="" class="o-teaser teaser--icon-image">

            <div class="teaser__image">

                <img src="../../images/teaser--siegel-1.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">

            </div>

        </a>

        <div class="o-teaser teaser--icon-image">

            <div class="teaser__image">

                <img src="../../images/teaser--siegel-2.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">

            </div>

        </div>

        <div class="o-teaser teaser--icon-image">

            <div class="teaser__image">

                <img src="../../images/teaser--siegel-3.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">

            </div>

        </div>

    </div>

    <div class="teaser-collection__cta-row">
        <a class="a-btn btn--secondary" href="" title="">
            Mehr erfahren
        </a>

    </div>

</div>
 
<div class="o-teaser-collection {{viewtypes.specifier}}" {{#content.id}}id="{{this}}"{{/content.id}}>

  {{# switches.hasHeadline }}
    <h3 class="teaser-collection__headline {{viewtypes.headlineSpecifier}}">{{ content.headline }}</h3>
  {{/switches.hasHeadline}}

  {{# switches.hasDetailText }}
    <div class="teaser-collection__text">
      {{# switches.isPlaintext }}
        {{ content.plaintext }}
      {{/ switches.isPlaintext }}
      {{^ switches.isPlaintext }}
        {{ render '@richtext' partials.richtext merge=true }}
      {{/ switches.isPlaintext }}
    </div>
  {{/switches.hasDetailText}}

  <div class="teaser-collection__teaser-wrapper" {{{ content.attributes }}}>
    {{# each partials.teaserItems }}
      {{#ifcond @index '<' ../switches.teaserItemAmount}}
        {{#ifcond switches.isColumnPosition '==' 1}}
          {{ render (stringToPartial ../partials.includedItemType) this merge=true }}
        {{/ifcond}}
      {{/ifcond}}
    {{/each}}
  </div>

  {{# switches.hasTwoColumns }}
    <div class="teaser-collection__teaser-wrapper" {{{ content.attributes }}}>
      {{# each partials.teaserItems }}
        {{#ifcond @index '<' ../switches.teaserItemAmount}}
          {{#ifcond switches.isColumnPosition '==' 2}}
            {{ render (stringToPartial ../partials.includedItemType) this merge=true }}
          {{/ifcond}}
        {{/ifcond}}
      {{/each}}
    </div>
  {{/switches.hasTwoColumns}}

  {{# switches.hasFooter }}
    <div class="teaser-collection__footer">
      {{content.footertext}}
    </div>
  {{/switches.hasFooter}}

  {{# switches.hasCTA }}
    <div class="teaser-collection__cta-row">
      {{ render '@button' this.partials.button merge=true }}
    </div>
  {{/switches.hasCTA}}

</div>
 
{
  "switches": {
    "hasHeadline": true,
    "hasDetailText": true,
    "hasTwoColumns": false,
    "isPlaintext": false,
    "teaserItemAmount": 3,
    "hasCTA": true,
    "hasButton": false,
    "hasFooter": false
  },
  "viewtypes": {
    "specifier": "teaser-collection--seals js-teaser-targeting-init cs--a",
    "headlineSpecifier": "teaser-collection__headline--h4"
  },
  "content": {
    "headline": "Top-Krankenversicherung",
    "plaintext": "Dies ist ein bißchen Plaintext",
    "badge": "",
    "button": "",
    "footertext": "",
    "id": "seals"
  },
  "partials": {
    "includedItemType": "teaser--icon-image",
    "teaserItems": [
      {
        "switches": {
          "isLinkable": true,
          "isColumnPosition": 1
        },
        "partials": {
          "image": {
            "content": {
              "sourceUrl": "../../images/teaser--siegel-1.png"
            }
          }
        }
      },
      {
        "switches": {
          "isColumnPosition": 1
        },
        "partials": {
          "image": {
            "content": {
              "sourceUrl": "../../images/teaser--siegel-2.png"
            }
          }
        }
      },
      {
        "switches": {
          "isColumnPosition": 1
        },
        "partials": {
          "image": {
            "content": {
              "sourceUrl": "../../images/teaser--siegel-3.png"
            }
          }
        }
      }
    ],
    "richtext": {
      "switches": {
        "hasDefaultText": false
      },
      "content": {
        "text": "<p>Du konzentrierst dich auf deine Ausbildung, wir kümmern uns um deine Gesundheit,. Die Barmer wurde als \"Top Krankenkasse für junge Leute\" (FOCUS MONEY 21/2020) ausgezeichnet. \"Sehr gute digitale Leistungen\" heißt es in der Auszeichnung - und das stimmt: Wir sind immer für dich da, wenn du uns brauchst.</p>"
      }
    },
    "button": {
      "switches": {
        "asLink": true
      },
      "viewtypes": {
        "specifier": "btn--secondary"
      },
      "content": {
        "label": "Mehr erfahren"
      }
    }
  }
}

Headline Tag is default rendered as a H3, but styling is controlled by headlineSpecifier.