Barmer Fractal

Figure: Without Cropping 

<figure class="m-figure figure--without-cropping">

    <picture class="a-picture ">
        <img src="../../images/illustration-der-bonus-app.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
    </picture>

</figure>
 
<figure class="m-figure {{viewtypes.specifier}}">

  {{# switches.hasHeadline }}
    <h2 class="figure__headline {{viewtypes.headlineSpecifier}}">
      {{content.headline}}
    </h2>
  {{/switches.hasHeadline}}

  {{# switches.hasPicture}}
    {{# switches.hasLazyLoading }}
      {{ render '@picture' this.partials.picture merge=true }}
    {{/switches.hasLazyLoading}}
    {{^ switches.hasLazyLoading }}
      {{ render '@picture--no-lazy' this.partials.picture merge=true }}
    {{/switches.hasLazyLoading}}
  {{/switches.hasPicture}}

  {{# switches.hasBlockquote }}
    <blockquote class="figure__blockquote a-richtext">
      {{{ content.blockquoteRichtext }}}
    </blockquote>
  {{/switches.hasBlockquote}}

  {{# switches.hasDownload }}
    <div class="figure__download">
      {{ render '@button--download' this.partials.button merge=true }}
    </div>
  {{/ switches.hasDownload }}

  {{# switches.hasFigcaption }}
    <figcaption class="figure__figcaption {{viewtypes.figcaptionSpecifier}}" {{# switches.hasDownload }}aria-hidden="true"{{/ switches.hasDownload }}>
      {{#if switches.hasBlockquoteSource }}
        &ndash; {{content.blockquoteSourceName}}{{#content.blockquoteSourceAge}} ({{this}}){{/content.blockquoteSourceAge}}{{#content.blockquoteSourcePosition}}, {{this}}{{/content.blockquoteSourcePosition}}
      {{else}}
        {{{ content.captionText }}}
      {{/if}}
    </figcaption>
  {{/ switches.hasFigcaption }}
</figure>
 
{
  "switches": {
    "hasHeadline": false,
    "hasPicture": true,
    "hasBlockquote": false,
    "hasFigcaption": false,
    "hasBlockquoteSource": false,
    "hasLazyLoading": true
  },
  "viewtypes": {
    "specifier": "figure--without-cropping",
    "headlineSpecifier": "figure__headline--h3",
    "figcaptionSpecifier": ""
  },
  "content": {},
  "partials": {
    "picture": {
      "content": {
        "sources": [],
        "img": {
          "src": "../../images/illustration-der-bonus-app.jpg",
          "alt": "Dies ist ein alternativ Text",
          "width": false,
          "height": false
        }
      }
    }
  }
}

No notes defined.