# Hero

# Fullscreen

    <section class="module-cover parallax text-center fullscreen" data-background="assets/images/module-2.jpg" data-overlay="0.6">
       <div class="container">
           <div class="row">
               <div class="col-md-12">
                   <h1>Fullscreen</h1>
               </div>
           </div>
       </div>
    </section>

    section.module-cover.parallax.text-center.fullscreen(data-background="assets/images/module-2.jpg" data-overlay="0.6")
       .container

           .row
               .col-md-12
                   h1 Fullscreen

# Auto Height

    <section class="module-cover parallax text-center " data-background="assets/images/module-3.jpg" data-overlay="0.5">
       <div class="container">
           <div class="row">
               <div class="col-md-12">
                   <h1>Auto Height</h1>
               </div>
           </div>
       </div>
    </section>

    section.module-cover.parallax.text-center(data-background="assets/images/module-3.jpg" data-overlay="0.5")
       .container

           .row
               .col-md-12
                   h1 Auto Height

- # Slide 1

- # Slide 2

- # Slide 3

    <section class="module-cover-slides" data-module-cover-slides-options="{&quot;animation&quot;: &quot;fade&quot;}">
       <ul class="slides-container">
           <li class="parallax" data-overlay="0.5">
               <img src="assets/images/module-1.jpg" alt="">
               <div class="container">
                   <div class="row">
                       <div class="col-md-12">
                           <h1>Slide 1</h1>
                       </div>
                   </div>
               </div>
           </li>
           <li class="parallax text-center" data-overlay="0.5">
               <img src="assets/images/module-21.jpg" alt="">
               <div class="container">
                   <div class="row">
                       <div class="col-md-12">
                           <h1>Slide 2</h1>
                       </div>
                   </div>
               </div>
           </li>
           <li class="parallax text-right" data-overlay="0.7" data-gradient="1">
               <img src="assets/images/module-25.jpg" alt="">
               <div class="container">
                   <div class="row">
                       <div class="col-md-12">
                           <h1>Slide 3</h1>
                       </div>
                   </div>
               </div>
           </li>
       </ul>
       <div class="slides-navigation">
           <a class="prev" href="#"><span class="ti-angle-left"></span></a>
           <a class="next" href="#"><span class="ti-angle-right"></span></a>
       </div>
    </section>

    section.module-cover-slides(data-module-cover-slides-options='{"animation": "fade"}')
       ul.slides-container
           li.parallax(data-overlay="0.5")
               img(src="assets/images/module-1.jpg" alt="")
               .container
                   .row
                       .col-md-12
                           h1 Slide 1
           li.parallax.text-center(data-overlay="0.5")
               img(src="assets/images/module-21.jpg" alt="")
               .container
                   .row
                       .col-md-12
                       h1 Slide 2
           li.parallax.text-right(data-overlay="0.7" data-gradient="1")
               img(src="assets/images/module-25.jpg" alt="")
               .container
                   .row
                       .col-md-12
                           h1 Slide 3
       .slides-navigation
           a(href="#" class="prev"): span.ti-angle-left
           a(href="#" class="next"): span.ti-angle-right