Galleries

The basic widget HTML markup to display one element looks the following way:

<div class="thumbnail-modern">
  <img class="thumbnail-modern-image" src="images/*" alt="" width=" " height=" "/>
  <div class="thumbnail-modern-caption">
    <div class="thumbnail-modern-caption-body">
      <div class="thumbnail-modern-title-left"> ... </div>
    </div>
    <div class="thumbnail-modern-caption-aside"><a class="thumbnail-modern-control" href="#"> ... </a></div>
  </div>
</div>

Gallery Grid without Padding

The basic widget HTML markup to display one element looks the following way:

<article class="box-minimal box-bordered-variant-2">
  <div class="box-minimal-icon fl-bigmug-line-code30 icon-primary"></div>
  <div class="box-minimal-title"> ... </div>
  <div class="box-minimal-divider"></div>
  <div class="box-minimal-text"> ... </div>
</article>

Gallery Grid Fullwidth

The basic widget HTML markup to display one element looks the following way:

<article class="box-minimal box-minimal-modern unit unit-xs-horizontal unit-spacing-sm">
  <div class="unit-left">
    <div class="box-minimal-icon">
      <div class="fl-bigmug-line-hot67 icon-success"></div>
    </div>
  </div>
  <div class="unit-body">
    <h5 class="box-minimal-title"><a href="#"> ... </a></h5>
    <div class="box-minimal-text"> ... </div>
  </div>
</article>

The basic widget HTML markup to display one element looks the following way:

<div class="thumbnail-variant-4">
<a class="thumbnail-ruby" href="#"><img class="thumbnail-ruby-image" src="images/*" alt="" width=" " height=" "/>
 <div class="thumbnail-ruby-caption">
   <p class="thumbnail-ruby-title"><span data-letters-l=" ... " data-letters-r=" ... "> ... </span></p>
 </div>
</a>

The basic widget HTML markup to display one element looks the following way:

<div class="thumbnail-modern">
  <img class="thumbnail-modern-image" src="images/*" alt="" width=" " height=" "/>
  <div class="thumbnail-modern-caption">
    <div class="thumbnail-modern-caption-body">
      <div class="thumbnail-modern-title-left"> ... </div>
    </div>
    <div class="thumbnail-modern-caption-aside"><a class="thumbnail-modern-control" href="#"> ... </a></div>
  </div>
</div>

Gallery Mosaic

The basic widget HTML markup to display one element looks the following way:

<div class="thumbnail-modern">
  <img class="thumbnail-modern-image" src="images/*" alt="" width=" " height=" "/>
  <div class="thumbnail-modern-caption">
    <div class="thumbnail-modern-caption-body">
      <div class="thumbnail-modern-title-left"> ... </div>
    </div>
    <div class="thumbnail-modern-caption-aside"><a class="thumbnail-modern-control" href="#"> ... </a></div>
  </div>
</div>

Album Gallery

Album Gallery #1

Album Gallery #2

The basic widget HTML markup to display gallery album looks the following way:

<div class="thumbnail-classic" data-lightgallery="dynamic" data-lg-dynamic-elements="[{"thumb":"../images/*.jpg","src":"../images/*.jpg"},{"thumb":"../images/*.jpg","src":"../images/*.jpg"},{"thumb":"../images/*.jpg","src":"../images/*.jpg"}]">
  <figure><img src="images/*.jpg" alt="" width="" height=""/>
  </figure>
  <div class="caption">
    <p class="caption-title">Album Gallery #1</p>
  </div>
</div>