TheaterMania Component Library

Thumbnails 

<a href="#article-link">
    <img src="//placehold.it/240x160" alt="Image alt text" class="thumbnail" />
</a>
 
{{#if thumbnail-plain}}
<a href="{{url}}" {{#if class}}class="{{class}}"{{/if}}>
  {{#if picture}}
    <picture>
      <source srcset="{{image}}" media="(min-width: 1025px)">
      <img src="{{imageSmall}}" class="thumbnail" alt="{{image-alt}}" />
    </picture>
  {{else}}
    <img src="{{image}}" alt="{{image-alt}}" class="thumbnail{{#if modifier}} thumbnail--{{modifier}}{{/if}}" />
  {{/if}}
</a>
{{/if}}

{{#if thumbnail-video}}
<a href="{{url}}" class="thumbnail-video-link{{#if class}} {{class}}{{/if}}">
  <div class="thumbnail-overlay-container">
    {{render '@icons--play'}}
    {{#if picture}}
      <picture>
        <source srcset="{{image}}" media="(min-width: 1025px)">
        <img srcset="{{imageSmall}}" class="thumbnail{{#if modifier}} thumbnail--{{modifier}}{{/if}}" alt="{{image-alt}}" />
      </picture>
    {{else}}
      <img src="{{image}}" alt="{{image-alt}}" class="thumbnail{{#if modifier}} thumbnail--{{modifier}}{{/if}}" />
    {{/if}}
  </div>
</a>
{{/if}}
 
/* No context defined for this component. */
  • Content: 
    .thumbnail {
  border: 0.25rem solid $color-background;
  outline: 1px solid $color-border;
  box-sizing: border-box;
}

.thumbnail-overlay-container {
  position: relative;

  &::after {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 0.5rem);
    height: calc(100% - 0.5rem);
    top: 0.25rem;
    left: 0.25rem;
    background: $color-black;
  }
}

.thumbnail--video {
  position: relative;
  z-index: 1;
  opacity: $opacity-light;
  transition: $transition;

  .thumbnail-video-link:hover & {
    opacity: $opacity-lighter;
  }
}

.icon--play {
  .thumbnail-overlay-container & {
    position: absolute;
    z-index: 2;
    top: 75%;
    left: 85%;
    fill: $color-white;
    stroke: $color-white;
    transform: translate(-50%, -50%) scale(0.7);
    transition: $transition;
  }

  .thumbnail-video-link:hover & {
    transform: translate(-50%, -50%) scale(0.9);
  }
}

.thumbnail-video-link {
  display: inline-block;
}
  • URL: /components/raw/thumbnails/Thumbnails.scss
  • Filesystem Path: src/components/01-Units/Images/Thumbnails/Thumbnails.scss
  • Size: 963 Bytes

Image sizes are currently arbitrary and subject to change.