Barmer Fractal

Figure: Has Download 

<figure class="m-figure m-figure--has-download">

    <picture class="a-picture ">
        <source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-kind.jpg">
        <source media="(min-width: 641px)" srcset="../../images/16x9/mann-mit-kind.jpg">
        <img src="../../images/16x9/mann-mit-kind.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
    </picture>

    <div class="figure__download">
        <a class="a-btn btn--download" href="#" title="" download="Download Titel">
            <span class="sr-only">Download: SR Download Title</span>
            JPEG 300KB<i class="a-icon icon--download" aria-hidden="true"></i>
        </a>

    </div>

    <figcaption class="figure__figcaption " aria-hidden="true">
        Ich bin eine Bildbschreibung
    </figcaption>
</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": true,
    "hasBlockquoteSource": false,
    "hasLazyLoading": true,
    "hasDownload": true
  },
  "viewtypes": {
    "specifier": "m-figure--has-download",
    "headlineSpecifier": "figure__headline--h3",
    "figcaptionSpecifier": ""
  },
  "content": {
    "captionText": "Ich bin eine Bildbschreibung",
    "srDownload": "Download: ",
    "srDownloadTitle": "Alternativtext des Bildes"
  },
  "partials": {
    "picture": {
      "content": {
        "sources": [
          {
            "media": "(max-width: 640px)",
            "srcset": "../../images/1x1/mann-mit-kind.jpg",
            "width": false,
            "height": false
          },
          {
            "media": "(min-width: 641px)",
            "srcset": "../../images/16x9/mann-mit-kind.jpg",
            "width": false,
            "height": false
          }
        ],
        "img": {
          "src": "../../images/16x9/mann-mit-kind.jpg",
          "alt": "Dies ist ein alternativ Text",
          "width": false,
          "height": false
        }
      }
    },
    "button": {
      "content": {
        "label": "JPEG 300KB"
      }
    }
  }
}

No notes defined.