Barmer Fractal

Teaser Collections: Iconbar Cs D 

<div class="o-teaser-collection teaser-collection--iconbar js-teaser-targeting-init cs--d">

    <h3 class="teaser-collection__headline teaser-collection__headline--h4">Barmer-Kundenservice: Wie koennen wir Ihnen helfen?</h3>

    <div class="teaser-collection__teaser-wrapper" role="list">

        <div class="o-teaser teaser--iconbar" role="listitem">

            <div class="teaser__image">

                <i class="a-icon icon--phone" aria-hidden="true"></i>

            </div>

            <div class="teaser__content">

                <div class="teaser__headline">
                    <a class="teaser__target" href="http://tagesschau.de">
                        <span class="link__inner">Barmer-App</span>
                        &nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                    </a>
                </div>

            </div>

        </div>

        <div class="o-teaser teaser--iconbar" role="listitem">

            <div class="teaser__image">

                <i class="a-icon icon--contact" aria-hidden="true"></i>

            </div>

            <div class="teaser__content">

                <div class="teaser__headline">
                    <a class="teaser__target" href="http://tagesschau.de">
                        <span class="link__inner">Telefon-Service</span>
                        &nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                    </a>
                </div>

            </div>

        </div>

        <div class="o-teaser teaser--iconbar" role="listitem">

            <div class="teaser__image">

                <i class="a-icon icon--message" aria-hidden="true"></i>

            </div>

            <div class="teaser__content">

                <div class="teaser__headline">
                    <a class="teaser__target" href="http://tagesschau.de">
                        <span class="link__inner">E-Mail-Kontakt</span>
                        &nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                    </a>
                </div>

            </div>

        </div>

    </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": false,
    "hasTwoColumns": false,
    "isPlaintext": false,
    "teaserItemAmount": 15,
    "hasCTA": false,
    "hasButton": false,
    "hasFooter": false
  },
  "viewtypes": {
    "specifier": "teaser-collection--iconbar js-teaser-targeting-init cs--d",
    "headlineSpecifier": "teaser-collection__headline--h4"
  },
  "content": {
    "headline": "Barmer-Kundenservice: Wie koennen wir Ihnen helfen?",
    "plaintext": "Dies ist ein bißchen Plaintext",
    "badge": "",
    "button": "",
    "footertext": "",
    "attributes": "role=\"list\""
  },
  "partials": {
    "includedItemType": "teaser--iconbar",
    "teaserItems": [
      {
        "switches": {
          "isColumnPosition": 1
        },
        "content": {
          "headline": "<span class=\"link__inner\">Barmer-App</span>"
        },
        "partials": {
          "iconType": "icon--phone"
        }
      },
      {
        "switches": {
          "isColumnPosition": 1
        },
        "content": {
          "headline": "<span class=\"link__inner\">Telefon-Service</span>"
        },
        "partials": {
          "iconType": "icon--contact"
        }
      },
      {
        "switches": {
          "isColumnPosition": 1
        },
        "content": {
          "headline": "<span class=\"link__inner\">E-Mail-Kontakt</span>"
        },
        "partials": {
          "iconType": "icon--message"
        }
      }
    ],
    "richtext": {
      "switches": {
        "hasDefaultText": false
      },
      "content": {
        "text": "<p>Hier steht dann eine kurzer Richtext, der nicht soviele Styling-Optionen hat. Im Studio lässt sich dort wohl nur strong, kursiv und noch irgendetwas auszeichnen.</p>"
      }
    },
    "button": {
      "switches": {
        "asLink": true
      },
      "viewtypes": {
        "specifier": "btn--primary"
      },
      "content": {
        "label": "Hier zu den Neuigkeiten"
      }
    }
  }
}

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