Thumbnail

HTML

JADE

Default

.e-thumbnail

<figure class="e-thumbnail">
  <div class="e-thumbnail__image">
    <img src="https://placehold.it/180x140/32d17e/fff">
  </div>
  <figcaption class="e-thumbnail__caption">
    <span>
      Thumbnail name
    </span>
  </figcaption>
</figure>


                        <figure class="e-thumbnail">
                          <div class="e-thumbnail__image"><img src="https://placehold.it/180x140/32d17e/fff"></div>
                          <figcaption class="e-thumbnail__caption"><span>Thumbnail name</span></figcaption>
                        </figure>

Variations

With reveal link

<figure class="e-thumbnail">
  <div class="e-thumbnail__image">
    <img src="https://placehold.it/180x140/7a81be/fff">
  </div>
  <figcaption class="e-thumbnail__caption">
    <span class="text-overflow">
      Thumbnail name loremm
    </span>
    <div class="e-thumbnail__reveal">
      <e-icon icon="folder-open" size="small"></e-icon>
    </div>
  </figcaption>
</figure>


                          <figure class="e-thumbnail">
                            <div class="e-thumbnail__image"><img src="https://placehold.it/180x140/7a81be/fff"></div>
                            <figcaption class="e-thumbnail__caption"><span class="text-overflow">Thumbnail name loremm</span>
                              <div class="e-thumbnail__reveal">
                                <e-icon icon="folder-open" size="small"></e-icon>
                              </div>
                            </figcaption>
                          </figure>

With label

<figure class="e-thumbnail">
  <div class="e-thumbnail__image">
    <img src="https://placehold.it/180x140/32d17e/fff">
  </div>
  <div class="e-thumbnail__label">
    Retina
  </div>
  <figcaption class="e-thumbnail__caption">
    <span>
      Thumbnail name
    </span>
  </figcaption>
</figure>


                          <figure class="e-thumbnail">
                            <div class="e-thumbnail__image"><img src="https://placehold.it/180x140/32d17e/fff"></div>
                            <div class="e-thumbnail__label">Retina</div>
                            <figcaption class="e-thumbnail__caption"><span>Thumbnail name</span></figcaption>
                          </figure>

With insert

<figure class="e-thumbnail">
  <div class="e-thumbnail__image">
    <img src="https://placehold.it/180x140/32d17e/fff">
    <div class="e-thumbnail__actions">
      <div class="e-thumbnail__insert"></div>
      <div class="e-flex e-flex-center e-thumbnail__buttons">
        <e-tooltip content="Edit image" class="e-flex__item">
          <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
            <e-icon icon="pencil"></e-icon>
          </button>
        </e-tooltip>
        <e-tooltip content="View in fullscreen" class="e-flex__item">
          <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
            <e-icon icon="eye"></e-icon>
          </button>
        </e-tooltip>
        <e-tooltip content="Add new image" class="e-flex__item">
          <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
            <e-icon icon="plus"></e-icon>
          </button>
        </e-tooltip>
        <e-tooltip content="Delete image" class="e-flex__item">
          <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
            <e-icon icon="trash-o"></e-icon>
          </button>
        </e-tooltip>
      </div>
    </div>
  </div>
  <figcaption class="e-thumbnail__caption">
    <span>
      Thumbnail name
    </span>
  </figcaption>
</figure>


                          <figure class="e-thumbnail">
                            <div class="e-thumbnail__image"><img src="https://placehold.it/180x140/32d17e/fff">
                              <div class="e-thumbnail__actions">
                                <div class="e-thumbnail__insert"></div>
                                <div class="e-flex e-flex-center e-thumbnail__buttons">
                                  <e-tooltip content="Edit image" class="e-flex__item">
                                    <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                      <e-icon icon="pencil"></e-icon>
                                    </button>
                                  </e-tooltip>
                                  <e-tooltip content="View in fullscreen" class="e-flex__item">
                                    <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                      <e-icon icon="eye"></e-icon>
                                    </button>
                                  </e-tooltip>
                                  <e-tooltip content="Add new image" class="e-flex__item">
                                    <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                      <e-icon icon="plus"></e-icon>
                                    </button>
                                  </e-tooltip>
                                  <e-tooltip content="Delete image" class="e-flex__item">
                                    <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                      <e-icon icon="trash-o"></e-icon>
                                    </button>
                                  </e-tooltip>
                                </div>
                              </div>
                            </div>
                            <figcaption class="e-thumbnail__caption"><span>Thumbnail name</span></figcaption>
                          </figure>

With background image

.e-thumbnail > .e-thumbnail__image-background

Thumbnail name

<figure class="e-thumbnail">
  <div style="background-image: url('https://placehold.it/1024x200/7a81be/fff')" class="e-thumbnail__image e-thumbnail__image-background"></div>
  <figcaption class="e-thumbnail__caption">
    <span>
      Thumbnail name
    </span>
  </figcaption>
</figure>


                          <figure class="e-thumbnail">
                            <div style="background-image: url('https://placehold.it/1024x200/7a81be/fff')" class="e-thumbnail__image e-thumbnail__image-background"></div>
                            <figcaption class="e-thumbnail__caption"><span>Thumbnail name</span></figcaption>
                          </figure>

With second text

<figure class="e-thumbnail">
  <div class="e-thumbnail__image">
    <img src="https://placehold.it/180x140/32d17e/fff">
  </div>
  <figcaption class="e-thumbnail__caption">
    <span>
      Thumbnail name
      <div class="text-size-subheader">
        Second text
      </div>
    </span>
  </figcaption>
</figure>


                          <figure class="e-thumbnail">
                            <div class="e-thumbnail__image"><img src="https://placehold.it/180x140/32d17e/fff"></div>
                            <figcaption class="e-thumbnail__caption"><span>Thumbnail name
                                <div class="text-size-subheader">Second text</div></span></figcaption>
                          </figure>

With text overflow

.e-thumbnail__caption-overflow

<figure class="e-thumbnail">
  <div class="e-thumbnail__image">
    <img src="https://placehold.it/180x140/7a81be/fff">
  </div>
  <figcaption class="e-thumbnail__caption e-thumbnail__caption-overflow">
    <span>
      Thumbnail name lorem ipsum
    </span>
  </figcaption>
</figure>


                          <figure class="e-thumbnail">
                            <div class="e-thumbnail__image"><img src="https://placehold.it/180x140/7a81be/fff"></div>
                            <figcaption class="e-thumbnail__caption e-thumbnail__caption-overflow"><span>Thumbnail name lorem ipsum</span></figcaption>
                          </figure>

With actions

.e-thumbnail > .e-thumbnail__actions

<figure class="e-thumbnail">
  <div class="e-thumbnail__image">
    <img src="https://placehold.it/180x140/32d17e/fff">
    <div class="e-thumbnail__actions">
      <div class="e-flex e-flex-center e-thumbnail__buttons">
        <e-tooltip content="Edit image" class="e-flex__item">
          <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
            <e-icon icon="pencil"></e-icon>
          </button>
        </e-tooltip>
        <e-tooltip content="View in fullscreen" class="e-flex__item">
          <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
            <e-icon icon="eye"></e-icon>
          </button>
        </e-tooltip>
        <e-tooltip content="Add new image" class="e-flex__item">
          <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
            <e-icon icon="plus"></e-icon>
          </button>
        </e-tooltip>
        <e-tooltip content="Delete image" class="e-flex__item">
          <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
            <e-icon icon="trash-o"></e-icon>
          </button>
        </e-tooltip>
      </div>
    </div>
  </div>
  <figcaption class="e-thumbnail__caption">
    <span>
      Thumbnail name
    </span>
  </figcaption>
</figure>


                          <figure class="e-thumbnail">
                            <div class="e-thumbnail__image"><img src="https://placehold.it/180x140/32d17e/fff">
                              <div class="e-thumbnail__actions">
                                <div class="e-flex e-flex-center e-thumbnail__buttons">
                                  <e-tooltip content="Edit image" class="e-flex__item">
                                    <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                      <e-icon icon="pencil"></e-icon>
                                    </button>
                                  </e-tooltip>
                                  <e-tooltip content="View in fullscreen" class="e-flex__item">
                                    <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                      <e-icon icon="eye"></e-icon>
                                    </button>
                                  </e-tooltip>
                                  <e-tooltip content="Add new image" class="e-flex__item">
                                    <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                      <e-icon icon="plus"></e-icon>
                                    </button>
                                  </e-tooltip>
                                  <e-tooltip content="Delete image" class="e-flex__item">
                                    <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                      <e-icon icon="trash-o"></e-icon>
                                    </button>
                                  </e-tooltip>
                                </div>
                              </div>
                            </div>
                            <figcaption class="e-thumbnail__caption"><span>Thumbnail name</span></figcaption>
                          </figure>

Fix height caption

Aliquip reprehenderit do fugiat exercitation dolor eu duis ut ex

<figure class="e-thumbnail">
  <div class="e-thumbnail__image">
    <img src="https://placehold.it/180x140/7a81be/fff">
  </div>
  <figcaption class="e-thumbnail__caption e-thumbnail__caption-fixheight">
    <span>
      Sed velit velit ut fugiat sunt laboris proident eu dolore 
    </span>
  </figcaption>
</figure>


                          <figure class="e-thumbnail">
                            <div class="e-thumbnail__image"><img src="https://placehold.it/180x140/7a81be/fff"></div>
                            <figcaption class="e-thumbnail__caption e-thumbnail__caption-fixheight"><span>Nisi sint laborum irure irure ut aute voluptate consequat eiusmod </span></figcaption>
                          </figure>

with details

Id consectetur do non anim quis do ut tempor officia

Eiusmod ad labore quis et minim in eu deserunt officia

View Detail

Retina

<figure class="e-thumbnail">
  <div style="background-image: url('https://placehold.it/1024x200/7a81be/fff')" class="e-thumbnail__image e-thumbnail__image-background"></div>
  <figcaption class="e-thumbnail__caption e-thumbnail__caption-fixheight">
    <span>
      Anim mollit consectetur nostrud lorem veniam irure aliquip magna laboris 
    </span>
  </figcaption>
  <div class="e-thumbnail__details">
    Nostrud occaecat in sed dolore dolore incididunt quis do laborum 
    <div class="e-thumbnail__button">
      View Detail
    </div>
  </div>
  <div class="e-thumbnail__label">
    Retina
  </div>
</figure>


                          <figure class="e-thumbnail">
                            <div style="background-image: url('https://placehold.it/1024x200/7a81be/fff')" class="e-thumbnail__image e-thumbnail__image-background"></div>
                            <figcaption class="e-thumbnail__caption e-thumbnail__caption-fixheight"><span>Nisi qui qui aliqua ut do magna mollit incididunt ea </span></figcaption>
                            <div class="e-thumbnail__details">Incididunt ut ullamco anim lorem in ea proident et aliqua 
                              <div class="e-thumbnail__button">View Detail</div>
                            </div>
                            <div class="e-thumbnail__label">Retina</div>
                          </figure>

Large size

.e-thumbnail-large

<figure class="e-thumbnail e-thumbnail-large">
  <div class="e-thumbnail__image">
    <img src="https://placehold.it/434x276/7a81be/fff">
  </div>
</figure>


                          <figure class="e-thumbnail e-thumbnail-large">
                            <div class="e-thumbnail__image"><img src="https://placehold.it/434x276/7a81be/fff"></div>
                          </figure>

Slider

.e-thumbnail-large

<figure data-e-slider class="e-thumbnail e-thumbnail-large">
  <div data-e-slider-target class="e-thumbnail__image">
    <a href="#" riot-tag="e-modalhandler" data-e-width="1024" data-e-image="https://placehold.it/800x600/7a81be/fff?text=A">
      <img src="https://placehold.it/434x276/7a81be/fff?text=A" alt>
    </a>
  </div>
  <div class="e-thumbnail__caption e-thumbnail__caption-slider">
    <a href="#" data-e-slider-prev class="e-thumbnail__prev"></a>
    <ul data-e-slider-page="2" class="e-thumbnail__slider">
      <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=A" data-e-slider-item-full="https://placehold.it/800x600/7a81be/fff?text=A" class="e-thumbnail__item">
        <img src="https://placehold.it/90x65/7a81be/fff?text=A">
      </li>
      <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=B" class="e-thumbnail__item">
        <img src="https://placehold.it/90x65/7a81be/fff?text=B">
      </li>
      <li data-e-slider-item="https://www.youtube.com/embed/LJP6h2OI9-o" class="e-thumbnail__item e-thumbnail__item-video">
        <img src="https://i.ytimg.com/vi/LJP6h2OI9-o/hqdefault.jpg">
      </li>
      <li data-e-slider-item="https://i.ytimg.com/vi/OsOYg5gpS0s/hqdefault.jpg" data-e-slider-item-full="https://www.youtube.com/embed/OsOYg5gpS0s?autoplay=1" class="e-thumbnail__item e-thumbnail__item-video">
        <img src="https://i.ytimg.com/vi/OsOYg5gpS0s/hqdefault.jpg">
      </li>
      <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=C" data-e-slider-item-full="https://placehold.it/800x600/7a81be/fff?text=C" class="e-thumbnail__item">
        <img src="https://placehold.it/90x65/7a81be/fff?text=C">
      </li>
      <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=D" data-e-slider-item-full="https://placehold.it/800x600/7a81be/fff?text=D" class="e-thumbnail__item">
        <img src="https://placehold.it/90x65/7a81be/fff?text=D">
      </li>
      <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=E" data-e-slider-item-full="https://placehold.it/800x600/7a81be/fff?text=E" class="e-thumbnail__item">
        <img src="https://placehold.it/90x65/7a81be/fff?text=E">
      </li>
      <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=F" data-e-slider-item-full="https://placehold.it/800x600/7a81be/fff?text=F" class="e-thumbnail__item">
        <img src="https://placehold.it/90x65/7a81be/fff?text=F">
      </li>
    </ul>
    <a href="#" data-e-slider-next class="e-thumbnail__next"></a>
  </div>
</figure>


                          <figure data-e-slider class="e-thumbnail e-thumbnail-large">
                            <div data-e-slider-target class="e-thumbnail__image"><a href="#" riot-tag="e-modalhandler" data-e-width="1024" data-e-image="https://placehold.it/800x600/7a81be/fff?text=A"><img src="https://placehold.it/434x276/7a81be/fff?text=A" alt=""></a></div>
                            <div class="e-thumbnail__caption e-thumbnail__caption-slider"><a href="#" data-e-slider-prev="" class="e-thumbnail__prev"></a>
                              <ul data-e-slider-page="2" class="e-thumbnail__slider">
                                <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=A" data-e-slider-item-full="https://placehold.it/800x600/7a81be/fff?text=A" class="e-thumbnail__item"><img src="https://placehold.it/90x65/7a81be/fff?text=A"></li>
                                <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=B" class="e-thumbnail__item"><img src="https://placehold.it/90x65/7a81be/fff?text=B"></li>
                                <li data-e-slider-item="https://www.youtube.com/embed/LJP6h2OI9-o" class="e-thumbnail__item e-thumbnail__item-video"><img src="https://i.ytimg.com/vi/LJP6h2OI9-o/hqdefault.jpg"></li>
                                <li data-e-slider-item="https://i.ytimg.com/vi/OsOYg5gpS0s/hqdefault.jpg" data-e-slider-item-full="https://www.youtube.com/embed/OsOYg5gpS0s?autoplay=1" class="e-thumbnail__item e-thumbnail__item-video"><img src="https://i.ytimg.com/vi/OsOYg5gpS0s/hqdefault.jpg"></li>
                                <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=C" data-e-slider-item-full="https://placehold.it/800x600/7a81be/fff?text=C" class="e-thumbnail__item"><img src="https://placehold.it/90x65/7a81be/fff?text=C"></li>
                                <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=D" data-e-slider-item-full="https://placehold.it/800x600/7a81be/fff?text=D" class="e-thumbnail__item"><img src="https://placehold.it/90x65/7a81be/fff?text=D"></li>
                                <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=E" data-e-slider-item-full="https://placehold.it/800x600/7a81be/fff?text=E" class="e-thumbnail__item"><img src="https://placehold.it/90x65/7a81be/fff?text=E"></li>
                                <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=F" data-e-slider-item-full="https://placehold.it/800x600/7a81be/fff?text=F" class="e-thumbnail__item"><img src="https://placehold.it/90x65/7a81be/fff?text=F"></li>
                              </ul><a href="#" data-e-slider-next="" class="e-thumbnail__next"></a>
                            </div>
                          </figure>

Slider pagination

.e-thumbnail-large

<figure data-e-slider data-e-slider-multiple class="e-thumbnail e-thumbnail-large">
  <div data-e-slider-target class="e-thumbnail__image">
    <a href="#" data-e-width="1024" data-e-image="https://placehold.it/800x600/7a81be/fff?text=A">
      <img src="https://placehold.it/434x276/7a81be/fff?text=A" alt>
    </a>
  </div>
  <div class="e-thumbnail__caption e-thumbnail__caption-slider">
    <a href="#" data-e-slider-prev class="e-thumbnail__prev"></a>
    <ul data-e-slider-page="2" class="e-thumbnail__slider">
      <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=A" data-e-slider-item-full="https://placehold.it/800x600/7a81be/fff?text=A" class="e-thumbnail__item">
        <img src="https://placehold.it/90x65/7a81be/fff?text=A">
      </li>
      <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=B" class="e-thumbnail__item">
        <img src="https://placehold.it/90x65/7a81be/fff?text=B">
      </li>
      <li data-e-slider-item="https://www.youtube.com/embed/LJP6h2OI9-o" class="e-thumbnail__item e-thumbnail__item-video">
        <img src="https://i.ytimg.com/vi/LJP6h2OI9-o/hqdefault.jpg">
      </li>
      <li data-e-slider-item="https://i.ytimg.com/vi/OsOYg5gpS0s/hqdefault.jpg" data-e-slider-item-full="https://www.youtube.com/embed/OsOYg5gpS0s?autoplay=1" class="e-thumbnail__item e-thumbnail__item-video">
        <img src="https://i.ytimg.com/vi/OsOYg5gpS0s/hqdefault.jpg">
      </li>
      <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=C" data-e-slider-item-full="https://placehold.it/800x600/7a81be/fff?text=C" class="e-thumbnail__item">
        <img src="https://placehold.it/90x65/7a81be/fff?text=C">
      </li>
      <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=D" data-e-slider-item-full="https://placehold.it/800x600/7a81be/fff?text=D" class="e-thumbnail__item">
        <img src="https://placehold.it/90x65/7a81be/fff?text=D">
      </li>
      <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=E" data-e-slider-item-full="https://placehold.it/800x600/7a81be/fff?text=E" class="e-thumbnail__item">
        <img src="https://placehold.it/90x65/7a81be/fff?text=E">
      </li>
      <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=F" data-e-slider-item-full="https://placehold.it/800x600/7a81be/fff?text=F" class="e-thumbnail__item">
        <img src="https://placehold.it/90x65/7a81be/fff?text=F">
      </li>
    </ul>
    <a href="#" data-e-slider-next class="e-thumbnail__next"></a>
  </div>
</figure>


                          <figure data-e-slider data-e-slider-multiple class="e-thumbnail e-thumbnail-large">
                            <div data-e-slider-target class="e-thumbnail__image"><a href="#" data-e-width="1024" data-e-image="https://placehold.it/800x600/7a81be/fff?text=A"><img src="https://placehold.it/434x276/7a81be/fff?text=A" alt=""></a></div>
                            <div class="e-thumbnail__caption e-thumbnail__caption-slider"><a href="#" data-e-slider-prev="" class="e-thumbnail__prev"></a>
                              <ul data-e-slider-page="2" class="e-thumbnail__slider">
                                <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=A" data-e-slider-item-full="https://placehold.it/800x600/7a81be/fff?text=A" class="e-thumbnail__item"><img src="https://placehold.it/90x65/7a81be/fff?text=A"></li>
                                <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=B" class="e-thumbnail__item"><img src="https://placehold.it/90x65/7a81be/fff?text=B"></li>
                                <li data-e-slider-item="https://www.youtube.com/embed/LJP6h2OI9-o" class="e-thumbnail__item e-thumbnail__item-video"><img src="https://i.ytimg.com/vi/LJP6h2OI9-o/hqdefault.jpg"></li>
                                <li data-e-slider-item="https://i.ytimg.com/vi/OsOYg5gpS0s/hqdefault.jpg" data-e-slider-item-full="https://www.youtube.com/embed/OsOYg5gpS0s?autoplay=1" class="e-thumbnail__item e-thumbnail__item-video"><img src="https://i.ytimg.com/vi/OsOYg5gpS0s/hqdefault.jpg"></li>
                                <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=C" data-e-slider-item-full="https://placehold.it/800x600/7a81be/fff?text=C" class="e-thumbnail__item"><img src="https://placehold.it/90x65/7a81be/fff?text=C"></li>
                                <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=D" data-e-slider-item-full="https://placehold.it/800x600/7a81be/fff?text=D" class="e-thumbnail__item"><img src="https://placehold.it/90x65/7a81be/fff?text=D"></li>
                                <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=E" data-e-slider-item-full="https://placehold.it/800x600/7a81be/fff?text=E" class="e-thumbnail__item"><img src="https://placehold.it/90x65/7a81be/fff?text=E"></li>
                                <li data-e-slider-item="https://placehold.it/434x276/7a81be/fff?text=F" data-e-slider-item-full="https://placehold.it/800x600/7a81be/fff?text=F" class="e-thumbnail__item"><img src="https://placehold.it/90x65/7a81be/fff?text=F"></li>
                              </ul><a href="#" data-e-slider-next="" class="e-thumbnail__next"></a>
                            </div>
                          </figure>

Usage

Components next to each other

<figure class="e-thumbnail">
  <div class="e-thumbnail__image">
    <img src="https://placehold.it/180x140/32d17e/fff">
  </div>
  <figcaption class="e-thumbnail__caption">
    <span>
      Thumbnail name
    </span>
  </figcaption>
</figure>
<figure class="e-thumbnail">
  <div class="e-thumbnail__image">
    <img src="https://placehold.it/180x140/32d17e/fff">
  </div>
  <figcaption class="e-thumbnail__caption">
    <span>
      Thumbnail name
    </span>
  </figcaption>
</figure>
<figure class="e-thumbnail">
  <div class="e-thumbnail__image">
    <img src="https://placehold.it/180x140/32d17e/fff">
  </div>
  <figcaption class="e-thumbnail__caption">
    <span>
      Thumbnail name
    </span>
  </figcaption>
</figure>
<figure class="e-thumbnail">
  <div class="e-thumbnail__image">
    <img src="https://placehold.it/180x140/32d17e/fff">
  </div>
  <figcaption class="e-thumbnail__caption">
    <span>
      Thumbnail name
    </span>
  </figcaption>
</figure>
<figure class="e-thumbnail">
  <div class="e-thumbnail__image">
    <img src="https://placehold.it/180x140/32d17e/fff">
  </div>
  <figcaption class="e-thumbnail__caption">
    <span>
      Thumbnail name
    </span>
  </figcaption>
</figure>
<figure class="e-thumbnail">
  <div class="e-thumbnail__image">
    <img src="https://placehold.it/180x140/32d17e/fff">
  </div>
  <figcaption class="e-thumbnail__caption">
    <span>
      Thumbnail name
    </span>
  </figcaption>
</figure>
<figure class="e-thumbnail">
  <div class="e-thumbnail__image">
    <img src="https://placehold.it/180x140/32d17e/fff">
  </div>
  <figcaption class="e-thumbnail__caption">
    <span>
      Thumbnail name
    </span>
  </figcaption>
</figure>
<figure class="e-thumbnail">
  <div class="e-thumbnail__image">
    <img src="https://placehold.it/180x140/32d17e/fff">
  </div>
  <figcaption class="e-thumbnail__caption">
    <span>
      Thumbnail name
    </span>
  </figcaption>
</figure>
<figure class="e-thumbnail">
  <div class="e-thumbnail__image">
    <img src="https://placehold.it/180x140/32d17e/fff">
  </div>
  <figcaption class="e-thumbnail__caption">
    <span>
      Thumbnail name
    </span>
  </figcaption>
</figure>
<figure class="e-thumbnail">
  <div class="e-thumbnail__image">
    <img src="https://placehold.it/180x140/32d17e/fff">
  </div>
  <figcaption class="e-thumbnail__caption">
    <span>
      Thumbnail name
    </span>
  </figcaption>
</figure>


                          <figure class="e-thumbnail">
                            <div class="e-thumbnail__image"><img src="https://placehold.it/180x140/32d17e/fff"></div>
                            <figcaption class="e-thumbnail__caption"><span>Thumbnail name</span></figcaption>
                          </figure>
                          <figure class="e-thumbnail">
                            <div class="e-thumbnail__image"><img src="https://placehold.it/180x140/32d17e/fff"></div>
                            <figcaption class="e-thumbnail__caption"><span>Thumbnail name</span></figcaption>
                          </figure>
                          <figure class="e-thumbnail">
                            <div class="e-thumbnail__image"><img src="https://placehold.it/180x140/32d17e/fff"></div>
                            <figcaption class="e-thumbnail__caption"><span>Thumbnail name</span></figcaption>
                          </figure>
                          <figure class="e-thumbnail">
                            <div class="e-thumbnail__image"><img src="https://placehold.it/180x140/32d17e/fff"></div>
                            <figcaption class="e-thumbnail__caption"><span>Thumbnail name</span></figcaption>
                          </figure>
                          <figure class="e-thumbnail">
                            <div class="e-thumbnail__image"><img src="https://placehold.it/180x140/32d17e/fff"></div>
                            <figcaption class="e-thumbnail__caption"><span>Thumbnail name</span></figcaption>
                          </figure>
                          <figure class="e-thumbnail">
                            <div class="e-thumbnail__image"><img src="https://placehold.it/180x140/32d17e/fff"></div>
                            <figcaption class="e-thumbnail__caption"><span>Thumbnail name</span></figcaption>
                          </figure>
                          <figure class="e-thumbnail">
                            <div class="e-thumbnail__image"><img src="https://placehold.it/180x140/32d17e/fff"></div>
                            <figcaption class="e-thumbnail__caption"><span>Thumbnail name</span></figcaption>
                          </figure>
                          <figure class="e-thumbnail">
                            <div class="e-thumbnail__image"><img src="https://placehold.it/180x140/32d17e/fff"></div>
                            <figcaption class="e-thumbnail__caption"><span>Thumbnail name</span></figcaption>
                          </figure>
                          <figure class="e-thumbnail">
                            <div class="e-thumbnail__image"><img src="https://placehold.it/180x140/32d17e/fff"></div>
                            <figcaption class="e-thumbnail__caption"><span>Thumbnail name</span></figcaption>
                          </figure>
                          <figure class="e-thumbnail">
                            <div class="e-thumbnail__image"><img src="https://placehold.it/180x140/32d17e/fff"></div>
                            <figcaption class="e-thumbnail__caption"><span>Thumbnail name</span></figcaption>
                          </figure>

Last update

Message	refactor(icon): use new component
Date:	()
Committer:	David Gyenes

Component history

Thumbnail

Default .e-thumbnail

Variations

With reveal link

With label

With insert

With background image .e-thumbnail > .e-thumbnail__image-background

With second text

With text overflow .e-thumbnail__caption-overflow

With actions .e-thumbnail > .e-thumbnail__actions

Fix height caption

with details

Large size .e-thumbnail-large

Slider .e-thumbnail-large

Slider pagination .e-thumbnail-large

Usage

Components next to each other

Last update

Default

.e-thumbnail

With background image

.e-thumbnail > .e-thumbnail__image-background

With text overflow

.e-thumbnail__caption-overflow

With actions

.e-thumbnail > .e-thumbnail__actions

Large size

.e-thumbnail-large

Slider

.e-thumbnail-large

Slider pagination

.e-thumbnail-large