Barmer Fractal

Downloadlist: With Thumbnail 

<ul class="o-downloadlist ">
    <li class="downloadlist__item">
        <a class="m-download download--with-thumbnail" href="#">
            <div class="download__thumbnail" aria-hidden="true">
                <img src="../../img/file-attachment.svg" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">

            </div>
            <div class="download__title">
                BARMER Dokument

            </div>
            <div class="download__size">DOCX 350.56 KB</div>
            <div class="download__icon">
                <i class="a-icon icon--download" aria-hidden="true"></i>
            </div>
        </a>

    </li>
    <li class="downloadlist__item">
        <a class="m-download download--with-thumbnail" href="#">
            <div class="download__thumbnail" aria-hidden="true">
                <img src="../../img/file-attachment.svg" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">

            </div>
            <div class="download__title">
                BARMER Dokument My only complaint would be the o
                &nbsp;<i class="a-icon icon--lock" aria-label="Geschützter Inhalt"></i>
            </div>
            <div class="download__size">PDF 1.2 MB</div>
            <div class="download__icon">
                <i class="a-icon icon--download" aria-hidden="true"></i>
            </div>
        </a>

    </li>
    <li class="downloadlist__item">
        <a class="m-download download--with-thumbnail" href="#">
            <div class="download__thumbnail" aria-hidden="true">
                <img src="../../images/starke-regionale-unterschiede-data.jpeg" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">

            </div>
            <div class="download__title">
                BARMER Image mit einem langen Name - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

            </div>
            <div class="download__size">PNG 3.66 MB</div>
            <div class="download__icon">
                <i class="a-icon icon--download" aria-hidden="true"></i>
            </div>
        </a>

    </li>
    <li class="downloadlist__item">
        <a class="m-download download--with-thumbnail" href="#">
            <div class="download__thumbnail" aria-hidden="true">
                <img src="../../images/steiler-anstieg-der-corona-krankschreibungen-data.jpeg" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">

            </div>
            <div class="download__title">
                BARMER Image mit einem langen Name - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
                &nbsp;<i class="a-icon icon--lock" aria-label="Geschützter Inhalt"></i>
            </div>
            <div class="download__size">PNG 3.66 MB</div>
            <div class="download__icon">
                <i class="a-icon icon--download" aria-hidden="true"></i>
            </div>
        </a>

    </li>
    <li class="downloadlist__item">
        <a class="m-download download--with-thumbnail" href="#">
            <div class="download__thumbnail" aria-hidden="true">
                <img src="../../img/file-attachment.svg" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image image--svg" loading="lazy">

            </div>
            <div class="download__title">
                BARMER Dokument

            </div>
            <div class="download__size">DOCX 350.56 KB</div>
            <div class="download__icon">
                <i class="a-icon icon--download" aria-hidden="true"></i>
            </div>
        </a>

    </li>
</ul>
 
<ul class="o-downloadlist {{viewtypes.specifier}}">
  {{#each partials.listitems as |download| }}
    <li class="downloadlist__item">
    {{ render (stringToPartial content.downloadType) download merge=true }}
    </li>
  {{/each}}
</ul>
 
{
  "switches": {},
  "viewtypes": {
    "specifier": ""
  },
  "partials": {
    "listitems": [
      {
        "content": {
          "title": "BARMER Dokument",
          "meta": "DOCX 350.56 KB",
          "downloadType": "download--with-thumbnail"
        },
        "partials": {
          "image": {
            "content": {
              "sourceUrl": "../../img/file-attachment.svg"
            }
          }
        }
      },
      {
        "switches": {
          "isProtected": true
        },
        "content": {
          "title": "BARMER Dokument My only complaint would be the o",
          "meta": "PDF 1.2 MB",
          "downloadType": "download--with-thumbnail"
        },
        "partials": {
          "image": {
            "content": {
              "sourceUrl": "../../img/file-attachment.svg"
            }
          }
        }
      },
      {
        "content": {
          "title": "BARMER Image mit einem langen Name - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat",
          "meta": "PNG 3.66 MB",
          "downloadType": "download--with-thumbnail"
        }
      },
      {
        "switches": {
          "isProtected": true
        },
        "content": {
          "title": "BARMER Image mit einem langen Name - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat",
          "meta": "PNG 3.66 MB",
          "downloadType": "download--with-thumbnail"
        },
        "partials": {
          "image": {
            "content": {
              "sourceUrl": "../../images/steiler-anstieg-der-corona-krankschreibungen-data.jpeg"
            }
          }
        }
      },
      {
        "content": {
          "title": "BARMER Dokument",
          "meta": "DOCX 350.56 KB",
          "downloadType": "download--with-thumbnail"
        },
        "partials": {
          "image": {
            "viewtypes": {
              "specifier": "image--svg"
            },
            "content": {
              "sourceUrl": "../../img/file-attachment.svg"
            }
          }
        }
      }
    ]
  }
}

No notes defined.