<div class="asset-grid js asset-dropzone">
    <div class="drop-invitation">
        <div class="drop-invitation-inner">
            <div class="drop-message">
                <h2><svg width="16" height="16" class="icon icon-upload"><use xlink:href="/assets/svg/assets.svg#upload" /></svg> Drop files to anywhere upload</h2>
                <p><svg width="12" height="12" class="icon icon-box-storage"><use xlink:href="/assets/svg/core.svg#box-storage" /></svg> <em>s3</em></p>
            </div>
        </div>
    </div>

    <div class="grid-asset asset-image asset-display-square" data-id="114">
        <img src="/assets/img/05-loadingbay.jpg" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-square" data-id="114">
        <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-square" data-id="114">
        <img src="/assets/img/02-library@2x.jpg" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-square" data-id="114">
        <img src="/assets/img/02-library@2x.jpg" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-square" data-id="114">
        <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-square" data-id="114">
        <img src="/assets/img/02-library@2x.jpg" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-square" data-id="114">
        <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-square" data-id="114">
        <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-square" data-id="114">
        <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-square" data-id="114">
        <img src="/assets/img/02-library@2x.jpg" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-square" data-id="114">
        <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-letterbox" data-id="114">
        <img src="/assets/img/04-canon-logo@2x.png" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-square" data-id="114">
        <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-square" data-id="114">
        <img src="/assets/img/02-library@2x.jpg" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-square" data-id="114">
        <img src="/assets/img/03-dukespecial@2x.jpg" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-letterbox" data-id="114">
        <img src="/assets/img/04-canon-logo@2x.png" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-thumbless" data-id="114">
        <svg width="64" height="64" class="icon icon-o-video"><use xlink:href="/assets/svg/assets.svg#o-video" /></svg>
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-square" data-id="114">
        <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-square" data-id="114">
        <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-square" data-id="114">
        <img src="/assets/img/02-library@2x.jpg" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-square" data-id="114">
        <img src="/assets/img/03-dukespecial@2x.jpg" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-square" data-id="114">
        <img src="/assets/img/02-library@2x.jpg" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-thumbless" data-id="114">
        <svg width="64" height="64" class="icon icon-o-video"><use xlink:href="/assets/svg/assets.svg#o-video" /></svg>
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

    <div class="grid-asset asset-image asset-display-square" data-id="114">
        <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
        <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
        <span class="asset-ratio asset-landscape"></span>
    </div>

</div>

<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script src="/assets/js/asset-grid.js"></script>
<div class="asset-grid {{mode}}">
{{#if dropzone}}
	{{ render "@drop-invitation" }}
{{/if}}

{{ render "@grid-asset--toosmall" }}
{{ render "@grid-asset--default" }}
{{ render "@grid-asset--landscape" }}
{{ render "@grid-asset--landscape" }}
{{ render "@grid-asset--default" }}
{{ render "@grid-asset--landscape" }}
{{ render "@grid-asset--default" }}
{{ render "@grid-asset--default" }}
{{ render "@grid-asset--default" }}
{{ render "@grid-asset--landscape" }}
{{ render "@grid-asset--default" }}



{{ render "@grid-asset--logo" }}
{{ render "@grid-asset--default" }}
{{ render "@grid-asset--landscape" }}
{{ render "@grid-asset--square" }}
{{ render "@grid-asset--logo" }}
{{ render "@grid-asset--thumbless" }}
{{ render "@grid-asset--default" }}
{{ render "@grid-asset--default" }}
{{ render "@grid-asset--landscape" }}
{{ render "@grid-asset--square" }}
{{ render "@grid-asset--landscape" }}
{{ render "@grid-asset--thumbless" }}
{{ render "@grid-asset--default" }}


</div>


{{#if mode}}
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script src="/assets/js/asset-grid.js"></script>
{{/if}}
{
  "mode": "js asset-dropzone",
  "dropzone": true
}
  • Content:
    .asset-grid {
    	display: flex;
    	flex-wrap: wrap;
    	justify-content: space-between;
    }
    
    .asset-grid .grid-asset {
    	flex: 0 1 auto;
    	margin-bottom: 4px;
    }
    
    .asset-grid .asset-display-letterbox {
    	width: 400px;
    }
    
  • URL: /components/raw/asset-grid/asset-grid.scss
  • Filesystem Path: src/components/10-assets/02-molecules/01-asset-grid/asset-grid.scss
  • Size: 207 Bytes

There are no notes for this item.