---
title: Photos
layout: common-ux-layout.hbs
---

<h3>Normal image</h3>
<section class="sg-section">
  <div class="sg-grid responsive">
    <div class="sg-item">
      <div class="module-library-block module-image" data-code="html">
        {{>image_normal image-url='https://www.tui.se/tuin-img/2017_8/19_14/0652e8d1-5e23-4e9b-9dcc-a7d400f6f35e/i_0245834WebOriginalCompressed.jpg?crop=edges&fit=crop?w=640&h=480&fm=jpg&fl=progressive'}}
        <img src="/cdn/img/bamse/v2/bamse.svg" alt="Bamse svg" width="300">
      </div>
    </div>
  </div>
</section>
<h3>Image with caption</h3>
<section class="sg-section">
  <div class="sg-grid responsive">
    <div class="sg-item">
      <div class="module-library-block module-image" data-code="html">
        {{>image image.fields description="This is a description"}}
      </div>
    </div>
  </div>
</section>
<h3>Image by Ratio</h3>
<section class="sg-section">
  <div class="sg-grid responsive">
    <div class="sg-item">
      <div class="module-library-block module-image" data-code="html">
        {{#each image_ratio}}
          {{>image_ratio}}
        {{/each}}
      </div>
    </div>
  </div>
</section>
<h3>Responsive Image</h3>
<section class="sg-section">
  <div class="sg-grid responsive">
    <div class="sg-item">
      <div class="module-library-block module-image" data-code="html">
        {{>image_responsive_card
          image-url="https://www.tui.se/tuin-img/2017_8/19_14/0652e8d1-5e23-4e9b-9dcc-a7d400f6f35e/i_0245834WebOriginalCompressed.jpg?crop=edges&fit=crop?w=1140&h=641&fm=jpg&fl=progressive"}}
      </div>
    </div>
  </div>
</section>
<h3>Responsive Hero Image</h3>
<section class="sg-section">
  <div class="sg-grid responsive">
    <div class="sg-item">
      <div class="module-library-block module-image" data-code="html">
        {{>image_responsive_hero image-contentful.data.fields.heroImage}}
      </div>
    </div>
  </div>
</section>
<h3>Round icon image</h3>
<section class="sg-section">
  <div class="sg-grid responsive">
    <div class="sg-item">
      <div class="module-library-block module-image" data-code="html">
        {{>image_icon_round
          url="http://images.ctfassets.net/kb4x8uh0bui6-utt4ktgm74n7/1zcYD3QEpOwKKgGUWM26gk/a300b8e4d9f670b0e52ebd07c53d3457/1440x605-0307762-varmeguide-tui.jpg"}}
      </div>
    </div>
  </div>
</section>
<h3>Lazyloaded image</h3>
<p>Using lazysize javascript library</p>
<section class="sg-section">
  <div class="sg-grid responsive">
    <div class="sg-item">
      <div class="module-library-block module-image" data-code="html">
        {{#each image_lazyload}}
          <div>
            <img data-src="{{image-url}}" alt="{{alt-text}}" class="{{class}}"/>
          </div>
        {{/each}}
      </div>
    </div>
  </div>
</section>