Barmer Fractal

Article Head 

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

    <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/mr-right.jpg">
            <source media="(min-width: 641px)" srcset="../../images/36x11/mr-right.jpg">
            <img src="../../images/36x11/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
        </picture>

    </div>
    <div class="m-breadcrumb breadcrumb--main">
        <span class="breadcrumb__label sr-only">Sie befinden sich hier:</span>
        <ul class="a-list-basic list--breadcrumb">
            <li class="list__item list__item--breadcrumb">
                <a href="/components/preview/homepage" class="a-link ">Barmer Startseite</a><i class="a-icon icon--chevron-right" aria-hidden="true"></i>

            </li>
            <li class="list__item list__item--breadcrumb">
                <a href="/components/preview/article" class="a-link "><span class="link__inner">Themen-Übersichtseite</span><i class="a-icon icon--lock" aria-label=""></i></a><i class="a-icon icon--chevron-right" aria-hidden="true"></i>

            </li>
            <li class="list__item list__item--breadcrumb">
                Barmer So ein Unterthema
            </li>
        </ul>

    </div>

    <div class="article-head__meta">
        <div class="article-head__label">Label und nicht Overline</div>

        <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 ">
                    Birgit Frohn, Diplom-Biologin
                </li>
                <li class="list__item ">
                    BARMER Redaktion, Jane Doe (Ich bin der sehr lange Untertitel am Autor)
                </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>
                <li class="list__item ">
                    Almeda GmbH, Ich stehe für Qualität, habe einen langen Namen, Sonderzeichen äöüß, Dr. med Schneider
                </li>
                <li class="list__item ">
                    <a href="http://zdf.de" class="a-link ">
                        <span class="link__inner">Anja Keller</span>&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                    </a>

                </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": true,
    "isMagazineView": false
  },
  "viewtypes": {
    "specifier": "article-head--stage"
  },
  "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/mr-right.jpg"
          },
          {
            "media": "(min-width: 641px)",
            "srcset": "../../images/36x11/mr-right.jpg"
          }
        ],
        "img": {
          "src": "../../images/36x11/mr-right.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": "Birgit Frohn, Diplom-Biologin"
                }
              },
              {
                "switches": {
                  "hasTextContent": true
                },
                "content": {
                  "text": "BARMER Redaktion, Jane Doe (Ich bin der sehr lange Untertitel am Autor)"
                }
              },
              {
                "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"
                }
              },
              {
                "switches": {
                  "hasTextContent": true
                },
                "content": {
                  "text": "Almeda GmbH, Ich stehe für Qualität, habe einen langen Namen, Sonderzeichen äöüß, Dr. med Schneider"
                }
              },
              {
                "switches": {
                  "hasTextContent": false
                },
                "type": "link--with-chevron-right",
                "partials": {
                  "item": {
                    "content": {
                      "text": "Anja Keller"
                    }
                  }
                }
              }
            ]
          }
        }
      }
    }
  }
}

No notes defined.