<div class="asset-grid ">

    <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>
<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": null
}
  • 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.