No notes defined.
<!-- Default -->
<div class="downloadItem">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<!-- Default -->
<div class="downloadItem">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<!-- Document -->
<div class="downloadItem" data-type="document">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-document.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Document</span>
<span class="downloadItem-metadata-item is-filetype">PDF</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<!-- Image -->
<div class="downloadItem" data-type="image">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Bild</span>
<span class="downloadItem-metadata-item is-filetype">JPG</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<!-- Logo -->
<div class="downloadItem" data-type="logo">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/logo-001.png" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Grafik</span>
<span class="downloadItem-metadata-item is-filetype">PNG</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<!-- Video -->
<div class="downloadItem" data-type="video">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Video</span>
<span class="downloadItem-metadata-item is-filetype">MPG</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<!-- Audio -->
<div class="downloadItem" data-type="audio">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Audio</span>
<span class="downloadItem-metadata-item is-filetype">AIFF</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<!-- Small -->
<div class="downloadItem is-small">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<!-- Large -->
<div class="downloadItem is-large" data-type="document">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-document.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<!-- Documentation only -->
<div class="doc-section">
<div class="doc-header">
<h2 class="doc-header-title">Large</h2>
<div class="doc-header-configuration">
<ul data-label="Modifier">
<li>is-large</li>
</ul>
</div>
</div>
<div class="doc-variant">
<div class="downloadItem is-large ">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<div class="downloadItem is-large " data-type="document">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-document.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Document</span>
<span class="downloadItem-metadata-item is-filetype">PDF</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<div class="downloadItem is-large " data-type="image">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Bild</span>
<span class="downloadItem-metadata-item is-filetype">JPG</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<div class="downloadItem is-large " data-type="logo">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/logo-001.png" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Grafik</span>
<span class="downloadItem-metadata-item is-filetype">PNG</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<div class="downloadItem is-large " data-type="video">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Video</span>
<span class="downloadItem-metadata-item is-filetype">MPG</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<div class="downloadItem is-large " data-type="audio">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Audio</span>
<span class="downloadItem-metadata-item is-filetype">AIFF</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
</div>
<div class="doc-section">
<div class="doc-header">
<h2 class="doc-header-title">Medium (Default)</h2>
</div>
<div class="doc-variant">
<div class="downloadItem ">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<div class="downloadItem " data-type="document">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-document.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Document</span>
<span class="downloadItem-metadata-item is-filetype">PDF</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<div class="downloadItem " data-type="image">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Bild</span>
<span class="downloadItem-metadata-item is-filetype">JPG</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<div class="downloadItem " data-type="logo">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/logo-001.png" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Grafik</span>
<span class="downloadItem-metadata-item is-filetype">PNG</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<div class="downloadItem " data-type="video">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Video</span>
<span class="downloadItem-metadata-item is-filetype">MPG</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<div class="downloadItem " data-type="audio">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Audio</span>
<span class="downloadItem-metadata-item is-filetype">AIFF</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
</div>
<div class="doc-section">
<div class="doc-header">
<h2 class="doc-header-title">Small</h2>
<div class="doc-header-configuration">
<ul data-label="Modifier">
<li>is-small</li>
</ul>
</div>
</div>
<div class="doc-variant">
<div class="downloadItem is-small ">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<div class="downloadItem is-small " data-type="document">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-document.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Document</span>
<span class="downloadItem-metadata-item is-filetype">PDF</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<div class="downloadItem is-small " data-type="image">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Bild</span>
<span class="downloadItem-metadata-item is-filetype">JPG</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<div class="downloadItem is-small " data-type="logo">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/logo-001.png" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Grafik</span>
<span class="downloadItem-metadata-item is-filetype">PNG</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<div class="downloadItem is-small " data-type="video">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Video</span>
<span class="downloadItem-metadata-item is-filetype">MPG</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
<div class="downloadItem is-small " data-type="audio">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Audio</span>
<span class="downloadItem-metadata-item is-filetype">AIFF</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
</div>
<!-- Default -->
<div class="downloadItem{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
<div class="downloadItem-image">
{{#ctas.[0]}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/ctas.[0]}}
{{#image}}
{{render '@figure' (contextData '@downloaditem' this) merge=false}}
{{/image}}
{{#ctas.[0]}}</a>{{/ctas.[0]}}
</div>
<div class="downloadItem-content">
{{#metadata}}
<div class="downloadItem-metadata">
{{#topics}}<span class="downloadItem-metadata-item is-topic">{{{.}}}</span>{{/topics}}
{{#type}}<span class="downloadItem-metadata-item is-type">{{{.}}}</span>{{/type}}
{{#filetype}}<span class="downloadItem-metadata-item is-filetype">{{{.}}}</span>{{/filetype}}
{{#filesize}}<span class="downloadItem-metadata-item is-filesize">{{{.}}}</span>{{/filesize}}
</div>
{{/metadata}}
{{#if title}}
<div class="downloadItem-title">
{{#ctas.[0]}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/ctas.[0]}}<strong>{{{title}}}</strong>{{#ctas.[0]}}</a>{{/ctas.[0]}}
</div>
{{/if}}
{{#description}}
<div class="downloadItem-description">
{{{.}}}
</div>
{{/description}}
</div>
<div class="downloadItem-interactions">
{{#link}}
{{render '@link' (contextData '@downloaditem' this) merge=true}}
{{/link}}
{{#ctas}}
{{render '@button--link' (contextData '@downloaditem' this) merge=true}}
{{/ctas}}
</div>
</div>
<!-- Default -->
<div class="downloadItem{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
<div class="downloadItem-image">
{{#ctas.[0]}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/ctas.[0]}}
{{#image}}
{{render '@figure' (contextData '@downloaditem' this) merge=false}}
{{/image}}
{{#ctas.[0]}}</a>{{/ctas.[0]}}
</div>
<div class="downloadItem-content">
{{#metadata}}
<div class="downloadItem-metadata">
{{#topics}}<span class="downloadItem-metadata-item is-topic">{{{.}}}</span>{{/topics}}
{{#type}}<span class="downloadItem-metadata-item is-type">{{{.}}}</span>{{/type}}
{{#filetype}}<span class="downloadItem-metadata-item is-filetype">{{{.}}}</span>{{/filetype}}
{{#filesize}}<span class="downloadItem-metadata-item is-filesize">{{{.}}}</span>{{/filesize}}
</div>
{{/metadata}}
{{#if title}}
<div class="downloadItem-title">
{{#ctas.[0]}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/ctas.[0]}}<strong>{{{title}}}</strong>{{#ctas.[0]}}</a>{{/ctas.[0]}}
</div>
{{/if}}
{{#description}}
<div class="downloadItem-description">
{{{.}}}
</div>
{{/description}}
</div>
<div class="downloadItem-interactions">
{{#link}}
{{render '@link' (contextData '@downloaditem' this) merge=true}}
{{/link}}
{{#ctas}}
{{render '@button--link' (contextData '@downloaditem' this) merge=true}}
{{/ctas}}
</div>
</div>
<!-- Document -->
<div class="downloadItem{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
<div class="downloadItem-image">
{{#ctas.[0]}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/ctas.[0]}}
{{#image}}
{{render '@figure' (contextData '@downloaditem' this) merge=false}}
{{/image}}
{{#ctas.[0]}}</a>{{/ctas.[0]}}
</div>
<div class="downloadItem-content">
{{#metadata}}
<div class="downloadItem-metadata">
{{#topics}}<span class="downloadItem-metadata-item is-topic">{{{.}}}</span>{{/topics}}
{{#type}}<span class="downloadItem-metadata-item is-type">{{{.}}}</span>{{/type}}
{{#filetype}}<span class="downloadItem-metadata-item is-filetype">{{{.}}}</span>{{/filetype}}
{{#filesize}}<span class="downloadItem-metadata-item is-filesize">{{{.}}}</span>{{/filesize}}
</div>
{{/metadata}}
{{#if title}}
<div class="downloadItem-title">
{{#ctas.[0]}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/ctas.[0]}}<strong>{{{title}}}</strong>{{#ctas.[0]}}</a>{{/ctas.[0]}}
</div>
{{/if}}
{{#description}}
<div class="downloadItem-description">
{{{.}}}
</div>
{{/description}}
</div>
<div class="downloadItem-interactions">
{{#link}}
{{render '@link' (contextData '@downloaditem' this) merge=true}}
{{/link}}
{{#ctas}}
{{render '@button--link' (contextData '@downloaditem' this) merge=true}}
{{/ctas}}
</div>
</div>
<!-- Image -->
<div class="downloadItem{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
<div class="downloadItem-image">
{{#ctas.[0]}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/ctas.[0]}}
{{#image}}
{{render '@figure' (contextData '@downloaditem' this) merge=false}}
{{/image}}
{{#ctas.[0]}}</a>{{/ctas.[0]}}
</div>
<div class="downloadItem-content">
{{#metadata}}
<div class="downloadItem-metadata">
{{#topics}}<span class="downloadItem-metadata-item is-topic">{{{.}}}</span>{{/topics}}
{{#type}}<span class="downloadItem-metadata-item is-type">{{{.}}}</span>{{/type}}
{{#filetype}}<span class="downloadItem-metadata-item is-filetype">{{{.}}}</span>{{/filetype}}
{{#filesize}}<span class="downloadItem-metadata-item is-filesize">{{{.}}}</span>{{/filesize}}
</div>
{{/metadata}}
{{#if title}}
<div class="downloadItem-title">
{{#ctas.[0]}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/ctas.[0]}}<strong>{{{title}}}</strong>{{#ctas.[0]}}</a>{{/ctas.[0]}}
</div>
{{/if}}
{{#description}}
<div class="downloadItem-description">
{{{.}}}
</div>
{{/description}}
</div>
<div class="downloadItem-interactions">
{{#link}}
{{render '@link' (contextData '@downloaditem' this) merge=true}}
{{/link}}
{{#ctas}}
{{render '@button--link' (contextData '@downloaditem' this) merge=true}}
{{/ctas}}
</div>
</div>
<!-- Logo -->
<div class="downloadItem{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
<div class="downloadItem-image">
{{#ctas.[0]}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/ctas.[0]}}
{{#image}}
{{render '@figure' (contextData '@downloaditem' this) merge=false}}
{{/image}}
{{#ctas.[0]}}</a>{{/ctas.[0]}}
</div>
<div class="downloadItem-content">
{{#metadata}}
<div class="downloadItem-metadata">
{{#topics}}<span class="downloadItem-metadata-item is-topic">{{{.}}}</span>{{/topics}}
{{#type}}<span class="downloadItem-metadata-item is-type">{{{.}}}</span>{{/type}}
{{#filetype}}<span class="downloadItem-metadata-item is-filetype">{{{.}}}</span>{{/filetype}}
{{#filesize}}<span class="downloadItem-metadata-item is-filesize">{{{.}}}</span>{{/filesize}}
</div>
{{/metadata}}
{{#if title}}
<div class="downloadItem-title">
{{#ctas.[0]}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/ctas.[0]}}<strong>{{{title}}}</strong>{{#ctas.[0]}}</a>{{/ctas.[0]}}
</div>
{{/if}}
{{#description}}
<div class="downloadItem-description">
{{{.}}}
</div>
{{/description}}
</div>
<div class="downloadItem-interactions">
{{#link}}
{{render '@link' (contextData '@downloaditem' this) merge=true}}
{{/link}}
{{#ctas}}
{{render '@button--link' (contextData '@downloaditem' this) merge=true}}
{{/ctas}}
</div>
</div>
<!-- Video -->
<div class="downloadItem{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
<div class="downloadItem-image">
{{#ctas.[0]}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/ctas.[0]}}
{{#image}}
{{render '@figure' (contextData '@downloaditem' this) merge=false}}
{{/image}}
{{#ctas.[0]}}</a>{{/ctas.[0]}}
</div>
<div class="downloadItem-content">
{{#metadata}}
<div class="downloadItem-metadata">
{{#topics}}<span class="downloadItem-metadata-item is-topic">{{{.}}}</span>{{/topics}}
{{#type}}<span class="downloadItem-metadata-item is-type">{{{.}}}</span>{{/type}}
{{#filetype}}<span class="downloadItem-metadata-item is-filetype">{{{.}}}</span>{{/filetype}}
{{#filesize}}<span class="downloadItem-metadata-item is-filesize">{{{.}}}</span>{{/filesize}}
</div>
{{/metadata}}
{{#if title}}
<div class="downloadItem-title">
{{#ctas.[0]}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/ctas.[0]}}<strong>{{{title}}}</strong>{{#ctas.[0]}}</a>{{/ctas.[0]}}
</div>
{{/if}}
{{#description}}
<div class="downloadItem-description">
{{{.}}}
</div>
{{/description}}
</div>
<div class="downloadItem-interactions">
{{#link}}
{{render '@link' (contextData '@downloaditem' this) merge=true}}
{{/link}}
{{#ctas}}
{{render '@button--link' (contextData '@downloaditem' this) merge=true}}
{{/ctas}}
</div>
</div>
<!-- Audio -->
<div class="downloadItem{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
<div class="downloadItem-image">
{{#ctas.[0]}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/ctas.[0]}}
{{#image}}
{{render '@figure' (contextData '@downloaditem' this) merge=false}}
{{/image}}
{{#ctas.[0]}}</a>{{/ctas.[0]}}
</div>
<div class="downloadItem-content">
{{#metadata}}
<div class="downloadItem-metadata">
{{#topics}}<span class="downloadItem-metadata-item is-topic">{{{.}}}</span>{{/topics}}
{{#type}}<span class="downloadItem-metadata-item is-type">{{{.}}}</span>{{/type}}
{{#filetype}}<span class="downloadItem-metadata-item is-filetype">{{{.}}}</span>{{/filetype}}
{{#filesize}}<span class="downloadItem-metadata-item is-filesize">{{{.}}}</span>{{/filesize}}
</div>
{{/metadata}}
{{#if title}}
<div class="downloadItem-title">
{{#ctas.[0]}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/ctas.[0]}}<strong>{{{title}}}</strong>{{#ctas.[0]}}</a>{{/ctas.[0]}}
</div>
{{/if}}
{{#description}}
<div class="downloadItem-description">
{{{.}}}
</div>
{{/description}}
</div>
<div class="downloadItem-interactions">
{{#link}}
{{render '@link' (contextData '@downloaditem' this) merge=true}}
{{/link}}
{{#ctas}}
{{render '@button--link' (contextData '@downloaditem' this) merge=true}}
{{/ctas}}
</div>
</div>
<!-- Small -->
<div class="downloadItem{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
<div class="downloadItem-image">
{{#ctas.[0]}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/ctas.[0]}}
{{#image}}
{{render '@figure' (contextData '@downloaditem' this) merge=false}}
{{/image}}
{{#ctas.[0]}}</a>{{/ctas.[0]}}
</div>
<div class="downloadItem-content">
{{#metadata}}
<div class="downloadItem-metadata">
{{#topics}}<span class="downloadItem-metadata-item is-topic">{{{.}}}</span>{{/topics}}
{{#type}}<span class="downloadItem-metadata-item is-type">{{{.}}}</span>{{/type}}
{{#filetype}}<span class="downloadItem-metadata-item is-filetype">{{{.}}}</span>{{/filetype}}
{{#filesize}}<span class="downloadItem-metadata-item is-filesize">{{{.}}}</span>{{/filesize}}
</div>
{{/metadata}}
{{#if title}}
<div class="downloadItem-title">
{{#ctas.[0]}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/ctas.[0]}}<strong>{{{title}}}</strong>{{#ctas.[0]}}</a>{{/ctas.[0]}}
</div>
{{/if}}
{{#description}}
<div class="downloadItem-description">
{{{.}}}
</div>
{{/description}}
</div>
<div class="downloadItem-interactions">
{{#link}}
{{render '@link' (contextData '@downloaditem' this) merge=true}}
{{/link}}
{{#ctas}}
{{render '@button--link' (contextData '@downloaditem' this) merge=true}}
{{/ctas}}
</div>
</div>
<!-- Large -->
<div class="downloadItem{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
<div class="downloadItem-image">
{{#ctas.[0]}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/ctas.[0]}}
{{#image}}
{{render '@figure' (contextData '@downloaditem' this) merge=false}}
{{/image}}
{{#ctas.[0]}}</a>{{/ctas.[0]}}
</div>
<div class="downloadItem-content">
{{#metadata}}
<div class="downloadItem-metadata">
{{#topics}}<span class="downloadItem-metadata-item is-topic">{{{.}}}</span>{{/topics}}
{{#type}}<span class="downloadItem-metadata-item is-type">{{{.}}}</span>{{/type}}
{{#filetype}}<span class="downloadItem-metadata-item is-filetype">{{{.}}}</span>{{/filetype}}
{{#filesize}}<span class="downloadItem-metadata-item is-filesize">{{{.}}}</span>{{/filesize}}
</div>
{{/metadata}}
{{#if title}}
<div class="downloadItem-title">
{{#ctas.[0]}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/ctas.[0]}}<strong>{{{title}}}</strong>{{#ctas.[0]}}</a>{{/ctas.[0]}}
</div>
{{/if}}
{{#description}}
<div class="downloadItem-description">
{{{.}}}
</div>
{{/description}}
</div>
<div class="downloadItem-interactions">
{{#link}}
{{render '@link' (contextData '@downloaditem' this) merge=true}}
{{/link}}
{{#ctas}}
{{render '@button--link' (contextData '@downloaditem' this) merge=true}}
{{/ctas}}
</div>
</div>
<!-- Documentation only -->
{{#sections}}
<div class="doc-section">
<div class="doc-header">
{{#title}}
<h2 class="doc-header-title">{{{.}}}</h2>
{{/title}}
{{#if modifiers}}
<div class="doc-header-configuration">
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
</div>
{{/if}}
</div>
{{#variants}}
<div class="doc-variant">
{{#samples}}
{{render '@downloaditem' (contextData '@downloaditem' this) merge=true}}
{{/samples}}
</div>
{{/variants}}
</div>
{{/sections}}
/* Default */
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
]
}
/* Default */
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
]
}
/* Document */
{
"metadata": {
"topics": [
"Topic"
],
"type": "Document",
"filetype": "PDF",
"filesize": "1.024 KB"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
],
"type": "document",
"image": {
"src": "/images/placeholder/dummy-document.jpg",
"alt": "Beschreibung des Teaser Images"
}
}
/* Image */
{
"metadata": {
"topics": [
"Topic"
],
"type": "Bild",
"filetype": "JPG",
"filesize": "1.024 KB"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
],
"type": "image",
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
}
}
/* Logo */
{
"metadata": {
"topics": [
"Topic"
],
"type": "Grafik",
"filetype": "PNG",
"filesize": "1.024 KB"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
],
"type": "logo",
"image": {
"src": "/images/placeholder/logo-001.png",
"alt": "Beschreibung des Teaser Images"
}
}
/* Video */
{
"metadata": {
"topics": [
"Topic"
],
"type": "Video",
"filetype": "MPG",
"filesize": "1.024 KB"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
],
"type": "video",
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
}
}
/* Audio */
{
"metadata": {
"topics": [
"Topic"
],
"type": "Audio",
"filetype": "AIFF",
"filesize": "1.024 KB"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
],
"type": "audio"
}
/* Small */
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
],
"modifier": "is-small"
}
/* Large */
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
],
"modifier": "is-large",
"type": "document",
"image": {
"src": "/images/placeholder/dummy-document.jpg",
"alt": "Beschreibung des Teaser Images"
}
}
/* Documentation only */
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
],
"sections": [
{
"title": "Large",
"modifiers": "is-large",
"variants": [
{
"modifiers": "is-large",
"samples": [
{
"error": "Context not found!",
"modifier": "is-large "
},
{
"type": "document",
"metadata": {
"type": "Document",
"filetype": "PDF"
},
"image": {
"src": "/images/placeholder/dummy-document.jpg",
"alt": "Beschreibung des Teaser Images"
},
"modifier": "is-large "
},
{
"type": "image",
"metadata": {
"type": "Bild",
"filetype": "JPG"
},
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"modifier": "is-large "
},
{
"type": "logo",
"metadata": {
"type": "Grafik",
"filetype": "PNG"
},
"image": {
"src": "/images/placeholder/logo-001.png",
"alt": "Beschreibung des Teaser Images"
},
"modifier": "is-large "
},
{
"type": "video",
"metadata": {
"type": "Video",
"filetype": "MPG"
},
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"modifier": "is-large "
},
{
"type": "audio",
"metadata": {
"type": "Audio",
"filetype": "AIFF"
},
"modifier": "is-large "
}
],
"modifier": "is-large"
}
]
},
{
"title": "Medium (Default)",
"variants": [
{
"samples": [
{
"error": "Context not found!",
"modifier": ""
},
{
"type": "document",
"metadata": {
"type": "Document",
"filetype": "PDF"
},
"image": {
"src": "/images/placeholder/dummy-document.jpg",
"alt": "Beschreibung des Teaser Images"
},
"modifier": ""
},
{
"type": "image",
"metadata": {
"type": "Bild",
"filetype": "JPG"
},
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"modifier": ""
},
{
"type": "logo",
"metadata": {
"type": "Grafik",
"filetype": "PNG"
},
"image": {
"src": "/images/placeholder/logo-001.png",
"alt": "Beschreibung des Teaser Images"
},
"modifier": ""
},
{
"type": "video",
"metadata": {
"type": "Video",
"filetype": "MPG"
},
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"modifier": ""
},
{
"type": "audio",
"metadata": {
"type": "Audio",
"filetype": "AIFF"
},
"modifier": ""
}
],
"modifier": ""
}
]
},
{
"title": "Small",
"modifiers": "is-small",
"variants": [
{
"modifiers": "is-small",
"samples": [
{
"error": "Context not found!",
"modifier": "is-small "
},
{
"type": "document",
"metadata": {
"type": "Document",
"filetype": "PDF"
},
"image": {
"src": "/images/placeholder/dummy-document.jpg",
"alt": "Beschreibung des Teaser Images"
},
"modifier": "is-small "
},
{
"type": "image",
"metadata": {
"type": "Bild",
"filetype": "JPG"
},
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"modifier": "is-small "
},
{
"type": "logo",
"metadata": {
"type": "Grafik",
"filetype": "PNG"
},
"image": {
"src": "/images/placeholder/logo-001.png",
"alt": "Beschreibung des Teaser Images"
},
"modifier": "is-small "
},
{
"type": "video",
"metadata": {
"type": "Video",
"filetype": "MPG"
},
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"modifier": "is-small "
},
{
"type": "audio",
"metadata": {
"type": "Audio",
"filetype": "AIFF"
},
"modifier": "is-small "
}
],
"modifier": "is-small"
}
]
}
]
}
@import "_downloadItem.settings";
@import "_downloadItem.styles";
$downloadItem_icon_stroke-width: 2 !default;
$downloadItem_icons: (
audio: '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="{{color}}" stroke-width="#{$downloadItem_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M10 21H4C3.73478 21 3.48043 20.8946 3.29289 20.7071C3.10536 20.5196 3 20.2652 3 20V12C3 11.7348 3.10536 11.4804 3.29289 11.2929C3.48043 11.1054 3.73478 11 4 11H10L19 4V28L10 21Z"/><path d="M24 13V19"/><path d="M28 11V21"/></svg>',
document: '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="{{color}}" stroke-width="#{$downloadItem_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M25 28H7C6.73478 28 6.48043 27.8946 6.29289 27.7071C6.10536 27.5196 6 27.2652 6 27V5C6 4.73478 6.10536 4.48043 6.29289 4.29289C6.48043 4.10536 6.73478 4 7 4H19L26 11V27C26 27.2652 25.8946 27.5196 25.7071 27.7071C25.5196 27.8946 25.2652 28 25 28Z"/><path d="M19 4V11H26"/><path d="M12 17H20"/><path d="M12 21H20"/></svg>',
generic: '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="{{color}}" stroke-width="#{$downloadItem_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M25 28H7C6.73478 28 6.48043 27.8946 6.29289 27.7071C6.10536 27.5196 6 27.2652 6 27V5C6 4.73478 6.10536 4.48043 6.29289 4.29289C6.48043 4.10536 6.73478 4 7 4H19L26 11V27C26 27.2652 25.8946 27.5196 25.7071 27.7071C25.5196 27.8946 25.2652 28 25 28Z"/><path d="M19 4V11H26"/></svg>',
image: '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="{{color}}" stroke-width="#{$downloadItem_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M27 6H5C4.44772 6 4 6.44772 4 7V25C4 25.5523 4.44772 26 5 26H27C27.5523 26 28 25.5523 28 25V7C28 6.44772 27.5523 6 27 6Z"/><path d="M18.4137 20.4998L21.625 17.2923C21.8125 17.1049 22.0668 16.9996 22.3319 16.9996C22.597 16.9996 22.8512 17.1049 23.0387 17.2923L28 22.2573M4 21.0861L10.7925 14.2923C10.8854 14.1993 10.9957 14.1256 11.1171 14.0753C11.2385 14.0249 11.3686 13.999 11.5 13.999C11.6314 13.999 11.7615 14.0249 11.8829 14.0753C12.0043 14.1256 12.1146 14.1993 12.2075 14.2923L23.9137 25.9998"/><circle cx="19.75" cy="11.75" r="0.75"/></svg>',
video: '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="{{color}}" stroke-width="#{$downloadItem_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M20 14L14 10V18L20 14Z"/><path d="M27 6H5C4.44772 6 4 6.44772 4 7V21C4 21.5523 4.44772 22 5 22H27C27.5523 22 28 21.5523 28 21V7C28 6.44772 27.5523 6 27 6Z"/><path d="M4 26H28"/></svg>',
) !default;
$downloadItem_icons: map.set($downloadItem_icons, "logo", map.get($downloadItem_icons, image));
$downloadItem_icon_size: 80px !default;
%downloadItem {
@include stack-spacing(component);
display: flex;
align-items: center;
column-gap: var(--sp);
width: 100%;
@include box-padding(default, (padding-top, padding-bottom));
border: var(--bw) $_accent-color;
border-style: solid none;
.button {
@include stack-spacing(0);
&.is-secondary {
order: -1;
}
}
&:not(.is-large) {
.button {
@extend %button--small;
}
}
img {
background-color: white;
}
&-image {
margin-top: 0 !important;
border-radius: var(--br-small);
overflow: hidden;
height: $downloadItem_icon_size;
width: $downloadItem_icon_size;
position: relative;
z-index: 1;
.figure {
display: none;
}
a {
display: block;
height: 100%;
}
&::before { // Icon
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
z-index: -1;
background: $_backdrop-color svg-url(map.get($downloadItem_icons, generic)) center center no-repeat;
border-radius: var(--br-small);
transition: background-color $_transition-duration;
}
&:has(a:hover)::before {
background-color: $_gray-200;
transition-duration: $_transition-duration--in;
}
}
@each $name, $data in $downloadItem_icons {
@if $name != "generic" {
&[data-type="#{$name}"] &-image::before {
background-image: svg-url($data);
}
}
}
&-content {
flex: 1 0;
column-gap: 1ch;
flex-wrap: wrap;
}
&-metadata {
@extend %kicker;
@include stack-spacing(0);
> * {
display: block;
}
&-item {
&.is-topic,
&.is-type {
@extend %kicker-item;
}
&.is-filesize {
white-space: nowrap;
}
&:not(.is-topic):not(.is-type) {
margin-left: (-2 * $kicker_gutter);
font-weight: $_font-weight;
}
&:where(.is-topic, .is-type) + :not(.is-topic):not(.is-type) {
margin-left: 0;
}
&:not(.is-topic):not(.is-type):not(:last-child)::after {
content: ",\00a0 ";
}
}
}
&-title {
@include text-size(x-large);
text-wrap: balance;
a {
color: inherit;
text-decoration: inherit;
}
}
&-description {
display: none;
}
&-interactions {
display: flex;
align-content: center;
flex-wrap: wrap;
gap: 1ch;
justify-content: flex-end;
}
@media (max-width: 430px) {
&:not(.is-large) &-interactions {
flex-direction: column;
}
}
}
%downloadItem--small {
@include stack-spacing();
@include box-padding(small, (padding-top, padding-bottom));
&::before { // Icon
display: none;
}
%downloadItem {
&-content {
display: flex;
align-items: baseline;
}
&-title {
order: -1;
@include text-size();
}
&-metadata {
flex-grow: 1;
min-width: max-content;
&-item.is-type {
@extend %visually-hidden;
}
&-item.is-type + %downloadItem-metadata-item {
margin-left: 0;
}
}
}
}
%downloadItem--large {
display: grid;
grid-template-columns: get-columns-width(3, 8) 1fr;
grid-template-rows: auto 1fr;
column-gap: var(--bp-large);
align-items: start;
@include box-padding(large, (padding-top, padding-bottom));
%downloadItem-image {
display: block;
grid-column: 1 / span 1;
grid-row: 1 / -1;
width: 100%;
height: auto;
aspect-ratio: 1;
.figure {
@include stack-spacing(0);
display: block;
width: 100%;
padding-bottom: 100%;
background-color: $_backdrop-color;
@include border-radius(small);
position: relative;
}
img {
position: absolute;
width: 100%;
height: 100%;
border-radius: 0;
transform: scale(1);
transition: transform $_transition-duration;
}
a:hover img {
transform: scale($figure_action_scale);
transition-duration: $_transition-duration--in;
}
}
&[data-type="document"] %downloadItem-image,
&[data-type="logo"] %downloadItem-image,
&[data-type="video"] %downloadItem-image {
@extend %documentMockup;
--ratio: 1;
margin-top: 0 !important;
}
&[data-type="logo"] %downloadItem-image img {
box-shadow: none !important;
}
&[data-type="document"] %downloadItem-image {
img {
@include box-shadow(large);
}
}
&[data-type="video"] %downloadItem-image img {
aspect-ratio: 16 / 9 !important;
box-shadow: none !important;
}
%downloadItem-content {
p {
@include stack-spacing(small);
}
}
%downloadItem-description {
display: block;
}
%downloadItem-interactions {
grid-column: 2 / span 1;
align-self: end;
justify-content: flex-start;
@include stack-spacing();
}
.button.is-secondary {
order: 99;
}
@include only-on-desktop(){
%downloadItem-image {
&::before {
background-size: 48px;
}
}
}
@include not-on-desktop(){
$ratio: 25%;
$min-width: 96px;
$max-width: 148px;
$icon-size: 36px;
grid-template-columns: minmax($min-width, min($ratio, $max-width)) 1fr;
column-gap: var(--bp);
padding-top: var(--bp);
padding-bottom: var(--bp);
}
}
.downloadItem {
@extend %downloadItem;
&.is-small {
@extend %downloadItem--small;
}
&.is-large {
@extend %downloadItem--large;
}
&-image {
@extend %downloadItem-image;
}
&-content {
@extend %downloadItem-content;
}
&-metadata {
@extend %downloadItem-metadata;
&-item {
@extend %downloadItem-metadata-item;
}
}
&-title {
@extend %downloadItem-title;
}
&-description {
@extend %downloadItem-description;
}
&-interactions {
@extend %downloadItem-interactions;
}
}