UTS Style Guide

<div class="featured-slider featured-slider--multi" data-show-single-caption="true" data-slides-to-show="1" data-center-padding="0%" data-center-mode="true" data-auto-play="false">
  <div class="featured-slider__slides js-featured-slider">
    <figure class="featured-slider__slide">
      <figcaption class="featured-slider__slide-caption">
        Fashion & Textiles - Menswear Studio
      </figcaption>
      <div class="featured-slider__slide-image">
        <img src="/themes/uts_theme/src/components/media-gallery/gallery-example-2.jpg" alt="Placeholder alt">
      </div>
    </figure>
    <figure class="featured-slider__slide">
      <div class="featured-slider__slide-video">
        <figcaption class="featured-slider__slide-caption">
          Pellentesque ornare sem lacinia quam venenatis vestibulum
        </figcaption>
        <img src="/themes/uts_theme/src/components/featured-slider/featured-slider-example.jpg">
        <button id="featured-slider-video-0">Play video</button>
        {% embed '@uts_theme/components/dialog/dialog.twig' with {toggle: 'featured-slider-video-0', label: 'Dialog', classes: 'js-dialog dialog--video'} %}
          {% block content %}
            <div class="video">
              <iframe width="560" height="315" src="https://www.youtube.com/embed/en2xEswn45o" frameborder="0" allowfullscreen></iframe>
            </div>
          {% endblock %}
        {% endembed %}
      </div>
    </figure>
    <figure class="featured-slider__slide">
      <figcaption class="featured-slider__slide-caption">
        Pellentesque ornare sem lacinia quam venenatis vestibulum
      </figcaption>
      <div class="featured-slider__slide-image">
        <img src="/themes/uts_theme/src/components/media-gallery/gallery-example-1.jpg" alt="Placeholder alt">
      </div>
    </figure>
    <figure class="featured-slider__slide">
      <figcaption class="featured-slider__slide-caption">
        Lorem ipsum dolor sit amet
      </figcaption>
      <div class="featured-slider__slide-image">
        <img src="/themes/uts_theme/src/components/media-gallery/gallery-example-2.jpg" alt="Placeholder alt">
      </div>
    </figure>
    <figure class="featured-slider__slide">
      <figcaption class="featured-slider__slide-caption">
        Fashion & Design- Menswear Studio
      </figcaption>
      <div class="featured-slider__slide-image">
        <img src="/themes/uts_theme/src/components/media-gallery/gallery-example-1.jpg" alt="Placeholder alt">
      </div>
    </figure>
    <figure class="featured-slider__slide">
      <figcaption class="featured-slider__slide-caption">
        Consectetur adipiscing elit
      </figcaption>
      <div class="featured-slider__slide-image">
        <img src="/themes/uts_theme/src/components/media-gallery/gallery-example-2.jpg" alt="Placeholder alt">
      </div>
    </figure>
    <figure class="featured-slider__slide">
      <figcaption class="featured-slider__slide-caption">
        Integer molestie lorem at massa.
      </figcaption>
      <div class="featured-slider__slide-image">
        <img src="/themes/uts_theme/src/components/media-gallery/gallery-example-1.jpg" alt="Placeholder alt">
      </div>
    </figure>
  </div>
</div>