---
title: Cover
---

{{#extend "layout-default"}}
  {{#content "css_vendor" mode="append"}}
    <link rel="stylesheet" href="{{global}}/vendor/plyr/plyr.css">
  {{/content}}


  {{#content "js_vendor" mode="append"}}
    <script src="{{global}}/vendor/plyr/plyr.js"></script>
  {{/content}}

  {{#content "js" mode="append"}}
    <script src="{{global}}/js/Plugin/plyr.js"></script>
  {{/content}}


  {{#content "body"}}

    <!-- Page -->
    <div class="page">
      <div class="page-header">
        <h1 class="page-title">Cover</h1>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{dest 'index.html'}}">Home</a></li>
          <li class="breadcrumb-item active">Structure</li>
        </ol>
        <div class="page-header-actions">
          <form>
            <div class="input-search input-search-dark">
              <i class="input-search-icon md-search" aria-hidden="true"></i>
              <input type="text" class="form-control" name="" placeholder="Search...">
            </div>
          </form>
        </div>
      </div>

      <div class="page-content">
        <!-- Panel -->
        <div class="panel">
          <div class="panel-body container-fluid">
            <div class="row row-lg">
              <div class="col-md-6">
                <!-- Example Video & Audio -->
                <div class="example-wrap">
                  <h4 class="example-title">Video & Audio</h4>
                  <div class="example">
                    <div class="cover player" data-plugin="plyr">
                      <video poster="{{assets}}/examples/images/poster.jpg" controls crossorigin>
                        <!-- Video Files -->
                        <source type="video/mp4" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4">
                        <source type="video/webm" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm">

                        <!-- Text Track File -->
                        <track kind="captions" label="English" srclang="en" src="//cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
                          default>

                        <!-- Fallback For Browsers That Don'T Support The <Video> Element -->
                        <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4">Download</a>
                      </video>
                    </div>
                  </div>

                  <div class="example">
                    <div class="cover player" data-plugin="plyr">
                      <audio controls style="height:40px">
                        <!-- Audio Files -->
                        <source type="audio/mp3" src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">
                        <source type="audio/ogg" src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.ogg">
                        <!-- Fallback For Browsers That Don'T Support The <Audio> Element -->
                        <a href="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
                      </audio>
                    </div>
                  </div>
                </div>
                <!-- End Example Video & Audio -->
              </div>

              <div class="col-md-6">
                <!-- Example Quote -->
                <div class="example-wrap">
                  <h4 class="example-title">Quote</h4>
                  <p>Add the <code>.cover-quote</code> class to a text.</p>
                  <div class="example">
                    <div class="cover">
                      <blockquote class="blockquote cover-quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Integer nec odio. </blockquote>
                    </div>
                  </div>
                  <p>Quote with background</p>
                  <div class="example">
                    <div class="cover">
                      <div class="cover-background py-30 px-15" style="background-image: url('{{global}}/photos/placeholder.png')">
                        <blockquote class="blockquote cover-quote white">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                          Integer nec odio. </blockquote>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Example Quote -->
              </div>

              <div class="col-md-6">
                <!-- Example Iframe -->
                <div class="example-wrap">
                  <h4 class="example-title">Iframe</h4>
                  <p>Add the <code>.cover-iframe</code> class to the iframe item.</p>
                  <div class="example">
                    <div class="cover">
                      <iframe class="cover-iframe h-500 h-only-sm-300 h-only-xs-300" src="http://www.youtube.com/embed/YE7VzlLtp-4?autoplay=0&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;enablejsapi=1&amp;api=1"></iframe>
                    </div>
                  </div>
                </div>
                <!-- Example Iframe -->
              </div>

              <div class="col-md-6">
                <!-- Example Background Image -->
                <div class="example-wrap">
                  <h4 class="example-title">Background Image</h4>
                  <p>Add the <code>.cover-background</code> class to an element with
                    a background image.</p>
                  <div class="example">
                    <div class="cover h-500 h-only-sm-300 h-only-xs-300">
                      <div class="cover-background" style="background-image: url('{{global}}/photos/placeholder.png')"></div>
                    </div>
                  </div>
                </div>
                <!-- Example Background Image -->
              </div>

              <div class="col-md-6">
                <!-- Example Responsive Image -->
                <div class="example-wrap m-sm-0">
                  <h4 class="example-title">Responsive Image</h4>
                  <p>Add the <code>.cover-image</code> class to a responsive image.</p>
                  <div class="example">
                    <div class="cover">
                      <img class="cover-image" src="{{global}}/photos/placeholder.png" alt="...">
                    </div>
                  </div>
                </div>
                <!-- End Example Responsive Image -->
              </div>

              <div class="col-md-6">
                <!-- Example Gallery -->
                <div class="example-wrap">
                  <h4 class="example-title">Gallery</h4>
                  <p>Add the <code>.cover-gallery</code> class to a gallery.</p>
                  <div class="example">
                    <div class="cover">
                      <div class="cover-gallery carousel slide" id="cover-gallery-example" data-ride="carousel">
                        <ol class="carousel-indicators">
                          <li class="active" data-target="#cover-gallery-example" data-slide-to="0"></li>
                          <li data-target="#cover-gallery-example" data-slide-to="1"></li>
                          <li data-target="#cover-gallery-example" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner" role="listbox">
                          <div class="carousel-item active">
                            <img class="h-full" alt="First slide" src="{{global}}/photos/placeholder.png">
                          </div>
                          <div class="carousel-item">
                            <img class="h-full" alt="Second  slide" src="{{global}}/photos/placeholder.png">
                          </div>
                          <div class="carousel-item">
                            <img class="h-full" alt="Third  slide" src="{{global}}/photos/placeholder.png">
                          </div>
                        </div>
                        <!-- Controls -->
                        <a class="carousel-control-prev" href="#cover-gallery-example" data-slide="prev"
                          role="button">
                          <span class="carousel-control-prev-icon md-chevron-left" aria-hidden="true"></span>
                          <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#cover-gallery-example" data-slide="next"
                          role="button">
                          <span class="carousel-control-next-icon md-chevron-right" aria-hidden="true"></span>
                          <span class="sr-only">Next</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Example Gallery -->
              </div>
            </div>
          </div>
        </div>
        <!-- End Panel -->
      </div>
    </div>
    <!-- End Page -->

  {{/content}}
{{/extend}}