Gallery

<!-- Image gallery -->
<div class="cs-gallery">
  <a href="path-to-large-image" class="cs-gallery-item rounded-lg" data-sub-html='<h6 class="font-size-sm text-light">Gallery image caption</h6>'>
    <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
    <span class="cs-gallery-caption">Gallery image caption</span>
  </a>
</div>

// Image gallery
.cs-gallery
  a(href="path-to-large-image", data-sub-html='<h6 class="font-size-sm text-light">Gallery image caption</h6>').cs-gallery-item.rounded-lg
    +image("path-to-thumbnail-image", "Gallery thumbnail")
    span.cs-gallery-caption Gallery image caption

<!-- Video gallery -->
<div class="cs-gallery">
  <a href="link-to-youtube/vimeo-video" class="cs-gallery-item cs-gallery-video rounded-lg" data-sub-html='<h6 class="font-size-sm text-light">Gallery video caption</h6>'>
    <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
    <span class="cs-gallery-caption">Gallery video caption</span>
  </a>
</div>

// Video gallery
.cs-gallery
  a(href="link-to-youtube/vimeo-video", data-sub-html='<h6 class="font-size-sm text-light">Gallery video caption</h6>').cs-gallery-item.video-item.rounded-lg
    +image("path-to-thumbnail-image", "Gallery thumbnail")
    span.cs-gallery-caption Gallery video caption

<!-- Iframe (Google map) -->
<div class="cs-gallery">
  <a href="link-to-google-map-embed" class="cs-gallery-item rounded-lg" data-sub-html='<h6 class="font-size-sm text-light">Google map embed</h6>'>
    <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
    <span class="cs-gallery-caption">Google map embed</span>
  </a>
</div>

// Iframe (Google map)
.cs-gallery
  a(href="link-to-google-map-embed", data-sub-html='<h6 class="font-size-sm text-light">Google map embed</h6>').cs-gallery-item.rounded-lg
    +image("path-to-thumbnail-image", "Gallery thumbnail")
    span.cs-gallery-caption Google map embed

<!-- Gallery grid with gutters -->
<div class="row cs-gallery">

  <!-- Item -->
  <div class="col-xl-4 col-sm-6 mb-grid-gutter">
    <a href="path-to-large-image" class="cs-gallery-item rounded-lg" data-sub-html='<h6 class="font-size-sm text-light">Gallery image caption</h6>'>
      <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
      <span class="cs-gallery-caption">Gallery image caption</span>
    </a>
  </div>

  <!-- Item -->
  <div class="col-xl-4 col-sm-6 mb-grid-gutter">
    ....
  </div>

  <!-- Add as many columns with gallery item inside as you need -->
</div>

// Gallery grid with gutters
.row.cs-gallery

  //- Item
  .col-xl-4.col-sm-6.mb-grid-gutter
    a(href="path-to-large-image", data-sub-html='<h6 class="font-size-sm text-light">Gallery image caption</h6>').cs-gallery-item.rounded-lg
      +image("path-to-thumbnail-image", "Gallery thumbnail")
      span.cs-gallery-caption Gallery image caption
  
  //- Item
  .col-xl-4.col-sm-6.mb-grid-gutter
    ...

  //- Add as many columns with gallery item inside as you need

<!-- Gallery grid no gutters -->
<div class="row cs-gallery no-gutters">

  <!-- Item -->
  <div class="col-xl-4 col-sm-6">
    <a href="path-to-large-image" class="cs-gallery-item" data-sub-html='<h6 class="font-size-sm text-light">Gallery image caption</h6>'>
      <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
      <span class="cs-gallery-caption">Gallery image caption</span>
    </a>
  </div>

  <!-- Item -->
  <div class="col-xl-4 col-sm-6">
    ....
  </div>
  
  <!-- Add as many columns with gallery item inside as you need -->
</div>

// Gallery grid no gutters
.row.cs-gallery.no-gutters

  //- Item
  .col-xl-4.col-sm-6
    a(href="path-to-large-image", data-sub-html='<h6 class="font-size-sm text-light">Gallery image caption</h6>').cs-gallery-item
      +image("path-to-thumbnail-image", "Gallery thumbnail")
      span.cs-gallery-caption Gallery image caption
  
  //- Item
  .col-xl-4.col-sm-6
    ...

  //- Add as many columns with gallery item inside as you need

<!-- Gallery inside card -->
<div class="card cs-gallery">
  <a href="path-to-large-image" class="cs-gallery-item card-img-top" data-sub-html='<h6 class="font-size-sm text-light">Gallery image caption</h6>'>
    <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
  </a>
  <div class="card-body">
    <h5 class="card-title">Card with gallery thumbnail</h5>
    <p class="card-text font-size-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

// Gallery inside card
.card.cs-gallery
  a(href="path-to-large-image", data-sub-html='<h6 class="font-size-sm text-light">Gallery image caption</h6>').cs-gallery-item.rounded-lg
    +image("path-to-thumbnail-image", "Gallery thumbnail")
  .card-body
    h5.card-title
      | Card with gallery thumbnail
    p.card-text.font-size-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

<!-- Gallery inside carousel  -->
<div class="cs-carousel cs-controls-center cs-gallery">
  <div class="cs-carousel-inner" data-carousel-options='{"nav": false, "responsive": {"0":{"items":1},"576":{"items":2, "gutter": 20},"1200":{"items":3, "gutter": 30}}}'>

    <!-- Item -->
    <div>
      <a href="path-to-large-image" class="cs-gallery-item" data-sub-html='<h6 class="font-size-sm text-light">Gallery image caption</h6>'>
        <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
        <span class="cs-gallery-caption">Gallery image caption</span>
      </a>
    </div>

     <!-- Add as many gallery items wrapped in divs as you need -->
  </div>
</div>

// Gallery inside carousel
.cs-carousel.cs-controls-center.cs-gallery
  .cs-carousel-inner(data-carousel-options='{"nav": false, "responsive": {"0":{"items":1},"576":{"items":2, "gutter": 20},"1200":{"items":3, "gutter": 30}}}')

    //- Item
    div
      a(href="path-to-large-image", data-sub-html='<h6 class="font-size-sm text-light">Gallery image caption</h6>').cs-gallery-item.rounded-lg
        +image("path-to-thumbnail-image", "Gallery thumbnail")
        span.cs-gallery-caption Gallery image caption
    
    //- Add as many gallery items wrapped in divs as you need