Davidson Styleguide

Image Demo 

<div class="slab ">
    <div class="slab__wrapper">
        <h2>Common Aspect Ratios</h2>
        <div class="sg-image-grid">
            <div class="sg-image-grid-tile">
            </div>
            <div class="sg-image-grid-tile">
            </div>
            <div class="sg-image-grid-tile">
            </div>
            <div class="sg-image-grid-tile">
            </div>
        </div>
        <h2>Portrait Aspect Ratios</h2>
        <div class="sg-image-grid">
            <div class="sg-image-grid-tile">
            </div>
            <div class="sg-image-grid-tile">
            </div>
            <div class="sg-image-grid-tile">
            </div>

        </div>
    </div>
</div>
 
{% embed '@slab' %}
    {% block slab_content %}
        <h2>Common Aspect Ratios</h2>
        <div class="sg-image-grid">
        {% for aspect in ['1:1','4:3','3:2','16:9'] %}
            <div class="sg-image-grid-tile">
                {% include '@image' with {ratio:aspect, w: 400, alt: aspect} %}
            </div>
        {% endfor %}
        </div>
        <h2>Portrait Aspect Ratios</h2>
        <div class="sg-image-grid">
        {% for aspect in ['3:4','2:3','9:16'] %}
            <div class="sg-image-grid-tile">
                {% include '@image' with {ratio:aspect, w: 400, alt: aspect} %}
            </div>
        {% endfor %}        
        </div>
    {% endblock %} 
{% endembed %}
 
/* No context defined for this component. */

This pattern demonstrates the image ratios available in the design. It should not be used as a part of any other pattern.