Barmer Fractal

Article Head: Magazine 

<div class="o-article-head article-head--magazine">

    <div class="article-head__stage">
        <!-- nicht als figure, da keine caption ausgespielt wird -->
        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/3x2/mann-mit-kind.jpg">
            <source media="(min-width: 641px)" srcset="../../images/1x1/mann-mit-kind.jpg">
            <img src="../../images/1x1/mann-mit-kind.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
        </picture>

    </div>

    <div class="article-head__meta">

        <h1 class="article-head__headline">Welche Reiseschutzimpfung ist empfohlen?</h1>
        <div class="article-head__readingtime">
            <i class="a-icon icon--timer" aria-hidden="true"></i>
            Lesedauer unter 6 Minuten
        </div>
    </div>

    <div class="article-head__info">
        <div class="m-list list--authors">

            <i class="a-icon icon--edit" aria-hidden="true"></i>
            <h4 class="list__headline">
                Autor
            </h4>

            <ul class="a-list-basic ">
                <li class="list__item ">
                    BARMER Redaktion
                </li>
                <li class="list__item ">
                    <a href="http://zdf.de" class="a-link ">
                        <span class="link__inner">Martin Zimmerman (Klick um mehr Informationen zu sehen)</span>&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                    </a>

                </li>
            </ul>

        </div>

        <div class="m-list list--quality">

            <i class="a-icon icon--check" aria-hidden="true"></i>
            <h4 class="list__headline">
                Qualitätssicherung
            </h4>

            <ul class="a-list-basic ">
                <li class="list__item ">
                    Heidi Gunther (Apothekerin bei der BARMER)
                </li>
                <li class="list__item ">
                    John Doe QS
                </li>
            </ul>

        </div>

    </div>

</div>
 
<div class="o-article-head {{viewtypes.specifier}}">

  {{# switches.hasMedia }}
    <div class="article-head__stage">
      {{# switches.hasSlider }}
        {{render '@slider--stage' partials.sliderStage merge=true }}
      {{/switches.hasSlider}}
      {{^switches.hasSlider }}
        <!-- nicht als figure, da keine caption ausgespielt wird -->
        {{render '@picture' partials.picture merge=true}}
      {{/switches.hasSlider}}
    </div>
  {{/ switches.hasMedia }}
  {{^ switches.isMagazineView }}
    {{render '@breadcrumb--main' merge=true }}
  {{/switches.isMagazineView}}

  <div class="article-head__meta">
    {{# switches.hasLabel }}
      <div class="article-head__label">{{content.label}}</div>
    {{/ switches.hasLabel }}

    <h1 class="article-head__headline">{{content.headline}}</h1>
    <div class="article-head__readingtime">
      {{render '@icon--timer'}}
      {{content.readingtimeText}}
    </div>
  </div>

  <div class="article-head__info">
    {{render '@list--article-info' partials.authors merge=true}}

    {{render '@list--article-info' partials.quality merge=true}}
  </div>

</div>
 
{
  "switches": {
    "hasMedia": true,
    "hasLabel": false,
    "isMagazineView": true
  },
  "viewtypes": {
    "specifier": "article-head--magazine"
  },
  "content": {
    "label": "Label und nicht Overline",
    "headline": "Welche Reiseschutzimpfung ist empfohlen?",
    "readingtimeText": "Lesedauer unter 6 Minuten"
  },
  "partials": {
    "picture": {
      "content": {
        "sources": [
          {
            "media": "(max-width: 640px)",
            "srcset": "../../images/3x2/mann-mit-kind.jpg"
          },
          {
            "media": "(min-width: 641px)",
            "srcset": "../../images/1x1/mann-mit-kind.jpg"
          }
        ],
        "img": {
          "src": "../../images/1x1/mann-mit-kind.jpg",
          "alt": "Dies ist ein alternativ Text"
        }
      }
    },
    "authors": {
      "viewtypes": {
        "specifier": "list--authors"
      },
      "content": {
        "headline": "Autor"
      },
      "partials": {
        "icon": {
          "viewtypes": {
            "specifier": "icon--edit"
          }
        },
        "list": {
          "viewtypes": {
            "specifier": ""
          },
          "content": {},
          "partials": {
            "listitems": [
              {
                "switches": {
                  "hasTextContent": true
                },
                "content": {
                  "text": "BARMER Redaktion"
                }
              },
              {
                "switches": {
                  "hasTextContent": false
                },
                "type": "link--with-chevron-right",
                "partials": {
                  "item": {
                    "content": {
                      "text": "Martin Zimmerman  (Klick um mehr Informationen zu sehen)"
                    }
                  }
                }
              }
            ]
          }
        }
      }
    },
    "quality": {
      "viewtypes": {
        "specifier": "list--quality"
      },
      "content": {
        "headline": "Qualitätssicherung"
      },
      "partials": {
        "icon": {
          "viewtypes": {
            "specifier": "icon--check"
          }
        },
        "list": {
          "viewtypes": {
            "specifier": ""
          },
          "content": {},
          "partials": {
            "listitems": [
              {
                "switches": {
                  "hasTextContent": true
                },
                "content": {
                  "text": "Heidi Gunther (Apothekerin bei der BARMER)"
                }
              },
              {
                "switches": {
                  "hasTextContent": true
                },
                "content": {
                  "text": "John Doe QS"
                }
              }
            ]
          }
        }
      }
    }
  }
}

No notes defined.