TV Show Grid
Component #1
<!-- Tv Show Grid Content -->
<section>
<div class="mb-1">
<div class="home-section">
<header class="d-md-flex align-items-center justify-content-between mb-4 pb-1 w-100">
<h6 class="font-size-24 font-weight-medium m-0 text-gray-700">Featured TV Series</h6>
<div class="d-none d-md-block border-top col p-0 ml-3 border-gray-3600"></div>
</header>
</div>
<div class="row mx-n2">
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/200x115/img18.jpg" alt="Image-Description">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">Comedy</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">Drama</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Ally McBeal</a>
</h6>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/200x115/img19.jpg" alt="Image-Desc">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">Thriller</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">American Horror Stroy</a>
</h6>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/200x115/img20.jpg" alt="Image-Desc">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">And Then There Were None</a>
</h6>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/200x115/img21.jpg" alt="Image-Desc">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">Action</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">Comedy</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Arrested Development</a>
</h6>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4 mb-lg-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/200x115/img2.jpg" alt="Image-Desc">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">Acton</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">Crime</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Arrow</a>
</h6>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4 mb-lg-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/200x115/img17.jpg" alt="Image-Desc">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">Crime</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">Drama</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Ashes to Ashes</a>
</h6>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4 mb-lg-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/200x115/img22.jpg" alt="Image-Desc">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">Comedy</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">Crime</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">American Vandal</a>
</h6>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/206x117/img5.jpg" alt="Image-Desc">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">Comedy</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">History</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Another Period</a>
</h6>
</div>
</div>
</div>
<div class="mt-6 collapse" id="collapseExample" style="">
<div class="container px-md-4">
<div class="row mx-n2">
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/200x115/img18.jpg" alt="Image-Description">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">Comedy</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">Drama</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Ally McBeal</a>
</h6>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/200x115/img19.jpg" alt="Image-Desc">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">Thriller</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">American Horror Stroy</a>
</h6>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/200x115/img20.jpg" alt="Image-Desc">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">And Then There Were None</a>
</h6>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/200x115/img21.jpg" alt="Image-Desc">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">Action</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">Comedy</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Arrested Development</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="space-1 position-relative d-flex">
<button class="btn btn-outline-1 mx-auto px-7 py-3 font-size-1 z-index-2 font-weight-medium font-secondary collapsed" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+ View more
</button>
<div class="border-top content-centered w-100 border-gray-1300"></div>
</div>
</div>
</section>
<!-- End Tv Show Single Content -->
Component #2
<!-- Tv Show Grid Content -->
<section>
<div class="container px-md-4">
<div class="row mx-n2 mb-md-4 pb-md-1">
<div class="col-md px-2">
<div class="product mb-3 mb-md-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/200x115/img18.jpg" alt="Image-Description">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">Comedy</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">Drama</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Chicago Med</a>
</h6>
</div>
</div>
<div class="col-md px-2">
<div class="product mb-3 mb-md-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/200x115/img19.jpg" alt="Image-Desc">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">Thriller</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">The Last Man</a>
</h6>
</div>
</div>
<div class="col-md px-2">
<div class="product mb-3 mb-md-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/200x115/img20.jpg" alt="Image-Desc">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Unbreakable Moments</a>
</h6>
</div>
</div>
<div class="col-md px-2">
<div class="product mb-3 mb-md-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/200x115/img21.jpg" alt="Image-Desc">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">Action</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">Comedy</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">House Of Cards</a>
</h6>
</div>
</div>
<div class="col-md px-2">
<div class="product mb-3 mb-md-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/200x115/img2.jpg" alt="Image-Desc">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">Acton</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">Crime</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Grey's Anatomy</a>
</h6>
</div>
</div>
</div>
</div>
</section>
<!-- End Tv Show Single Content -->
Component #3
<!-- Tv Show Grid Content -->
<section>
<div class="container px-md-4">
<div class="row mx-n2">
<div class="col-md-3 px-2">
<div class="product mb-4 pb-1">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/200x115/img18.jpg" alt="Image-Description">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">Comedy</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">Drama</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Chicago Med</a>
</h6>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-4 pb-1">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/200x115/img19.jpg" alt="Image-Desc">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">Thriller</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">The Last Man</a>
</h6>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-4 pb-1">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/200x115/img20.jpg" alt="Image-Desc">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Unbreakable Moments</a>
</h6>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-4 pb-1">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/200x115/img21.jpg" alt="Image-Desc">
</a>
</div>
<div class="product-meta font-size-12">
<span><a href="#" class="h-g-primary" tabindex="0">Action</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">Comedy</a></span>
<span><a href="#" class="h-g-primary" tabindex="0">2020</a></span>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">House Of Cards</a>
</h6>
</div>
</div>
</div>
</div>
</section>
<!-- End Tv Show Single Content -->