From 64714b12027b8b284d47f8e3bcc52adc86bc0771 Mon Sep 17 00:00:00 2001
From: devonpis <devonpis@gmail.com>
Date: Thu, 13 Jan 2022 09:12:28 +1000
Subject: [PATCH] Qol 8396 UI design for image zoom on click for swe 4 (#410)

* QOL-8396 UI design for Image zoom on click for SWE 4

* QOL-8396 UI design for Image zoom on click for SWE 4 and DC-28049 - change AGLS links

* floating images

* Added comments and styles changes

* Added comments and styles changes

* default color styles

* refactor image figure

Co-authored-by: asifamingov <asif.amin@dsiti.qld.gov.au>
---
 .../_blocks/components/gallery/qg-gallery.js  |   2 +-
 .../_blocks/components/misc/_qg-cards.scss    |  13 +-
 .../_blocks/components/misc/_qg-images.scss   |  33 ++++
 .../content/content-types/_cut-in-images.scss |  87 ++++++---
 src/assets/_project/images/Expand.svg         |  11 ++
 src/docs/components/floating-images1.html     | 176 ++++++++++++++++++
 src/docs/components/images.html               |  96 +++++++---
 7 files changed, 371 insertions(+), 47 deletions(-)
 create mode 100644 src/assets/_project/images/Expand.svg
 create mode 100644 src/docs/components/floating-images1.html

diff --git a/src/assets/_project/_blocks/components/gallery/qg-gallery.js b/src/assets/_project/_blocks/components/gallery/qg-gallery.js
index 68779f77c..192f3809c 100644
--- a/src/assets/_project/_blocks/components/gallery/qg-gallery.js
+++ b/src/assets/_project/_blocks/components/gallery/qg-gallery.js
@@ -1,6 +1,6 @@
 if ($("script[src*='jquery.fancybox']").length === 0) {
   // load scripts and styles only if any of the selectors are present on the page
-  if ($('.qg-image-gallery').length > 0 || $('.qg-lightbox').length > 0 || $('.image-gallery').length > 0 || $('[class*="cut-in"]').length > 0) {
+  if ($('[data-fancybox]').length > 0 || $('.qg-image-gallery').length > 0 || $('.qg-lightbox').length > 0 || $('.image-gallery').length > 0 || $('[class*="cut-in"]').length > 0) {
     // append style
     $('head').append($("<link rel='stylesheet' href='{{CDN}}/latest/lib/ext/fancybox/jquery.fancybox.min.css' type='text/css' media='screen' />"));
     // load script
diff --git a/src/assets/_project/_blocks/components/misc/_qg-cards.scss b/src/assets/_project/_blocks/components/misc/_qg-cards.scss
index 3073b8c14..39d5c835b 100644
--- a/src/assets/_project/_blocks/components/misc/_qg-cards.scss
+++ b/src/assets/_project/_blocks/components/misc/_qg-cards.scss
@@ -1,3 +1,12 @@
+//default color overwrite
+#qg-primary-content {
+  .qg-card:not(.qg-card__light-theme) {
+    h2 {
+      color: #fff;
+    }
+  }
+}
+// cards styles
 .qg-cards {
   display: flex;
   flex-direction: row;
@@ -149,7 +158,9 @@
 
     .details {
       padding: 1em;
-
+      h2 {
+        color: #fff;
+      }
       > :first-child {
         padding-right: 1rem;
         padding-top: 0;
diff --git a/src/assets/_project/_blocks/components/misc/_qg-images.scss b/src/assets/_project/_blocks/components/misc/_qg-images.scss
index 38884bcc1..f10c2198f 100644
--- a/src/assets/_project/_blocks/components/misc/_qg-images.scss
+++ b/src/assets/_project/_blocks/components/misc/_qg-images.scss
@@ -35,9 +35,42 @@
     @include rem(font-size, 14px);
     text-align: left;
     font-style: italic;
+    margin-top: 0.5em;
     .figure-credits {
       font-style: normal;
       color: #757575;
     }
   }
+
+  a[data-fancybox] {
+    @include rem(font-size, 14px);
+    display: block;
+    text-align: right;
+    position: relative;
+    &:hover {
+      >span, >img:not(.figure__expand-icon) {
+        outline: 1px solid #0066CC;
+        background: #F5F5F5;
+      }
+      .figure__expand-icon {
+        display: block;
+      }
+    }
+    .figure__expand-icon {
+      position: absolute;
+      display: none;
+      top: calc(50% + 15px);
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 3.125rem;
+      height: auto;
+    }
+    >span {
+      padding: 0.5em;
+      padding-top: 0.25em;
+      margin-top: -0.25em;
+      display: inline-block;
+      text-decoration: underline;
+    }
+  }
 }
diff --git a/src/assets/_project/_blocks/layout/content/content-types/_cut-in-images.scss b/src/assets/_project/_blocks/layout/content/content-types/_cut-in-images.scss
index fa7079634..f926f52c7 100644
--- a/src/assets/_project/_blocks/layout/content/content-types/_cut-in-images.scss
+++ b/src/assets/_project/_blocks/layout/content/content-types/_cut-in-images.scss
@@ -1,4 +1,6 @@
+// common styles
 .cut-in, .qg-cut-in, .qg-cut-in-alt {
+  display:block;
   position: relative;
   @include rem(max-width, 374px);
   @include rem(font-size, 14px);
@@ -7,31 +9,58 @@
   text-align: center;
   font-style: italic;
   border: 1px solid #eee;
+  transition: all 0.5s ease;
+  .qg-cut-in-alt__anchor:hover{
+    cursor: pointer;
+    .qg-cut-in__large-image a:not(.print-content-link) {
+      text-decoration: underline !important;
+    }
+    .qg-cut-in__img-container{
+      outline: 1px solid #0066CC;
+    }
+    .qg-cut-in-alt__expand-icon {
+      display: block;
+    }
+  }
+  .qg-cut-in-alt__expand-icon {
+    transition: all 0.5s ease;
+    display: none;
+    @include rem(width, 50px);
+    height: auto;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .qg-cut-in-alt__label {
+    display: block;
+    text-align: right;
+    font-style: normal;
+    @include rem(padding-right, 3px);
+  }
   img {
     height: auto;
     margin: 0 auto;
     display: block;
     width: 100%;
   }
-  .figure-credits {
-    @include rem(padding, 0 20px);
-  }
-  .caption {
-    @include rem(max-width, 284px);
-    @include rem(margin, 6px auto);
+  .qg-cut-in__ref {
     text-align: left;
-    font-style: italic;
-  }
-  .figure-credits-toggle {
-    position: absolute;
-    top: 0;
-    right: 0.6rem;
-    height: 3rem;
-    background: transparent;
-    opacity: 0.7;
-    border: 0;
+    .qg-cut-in__figure-credits {
+      display: block;
+      color: #757575;
+      font-style: normal;
+    }
+    .qg-cut-in__figure-caption {
+      display: block;
+      @include rem(margin, 6px 0 0 0);
+      text-align: left;
+      font-style: italic;
+    }
   }
 }
+
+// 'cut in' specific styles
 .qg-cut-in{
   @include media-breakpoint-up(md) {
     float: right;
@@ -47,6 +76,8 @@
   clear: right;
  }
 }
+
+// 'cut in alt' specific styles
 .qg-cut-in-alt{
   float: left;
   & + .cut-in-alt {
@@ -55,12 +86,20 @@
    }
 }
 
-.figure-credits-toggle {
-  position: absolute;
-  top: 0;
-  right: 0.6rem;
-  height: 3rem;
-  background: transparent;
-  opacity: 0.7;
-  border: 0;
+ //links overwrite for 'Cut in' component
+#qg-primary-content {
+  .cut-in, .qg-cut-in, .qg-cut-in-alt {
+    a:not(.print-content-link):active, a:not(.print-content-link):focus, a:not(.print-content-link):visited{
+      color: #13578b;
+    }
+    a:not(.print-content-link):link {
+      text-decoration: none;
+    }
+    a:not(.print-content-link):hover {
+      .qg-cut-in-alt__label {
+        text-decoration: underline;
+        background: #F5F5F5;
+      }
+    }
+  }
 }
diff --git a/src/assets/_project/images/Expand.svg b/src/assets/_project/images/Expand.svg
new file mode 100644
index 000000000..f2ae8d547
--- /dev/null
+++ b/src/assets/_project/images/Expand.svg
@@ -0,0 +1,11 @@
+<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect opacity="0.3" width="81" height="81" rx="5" fill="black"/>
+<g clip-path="url(#clip0_90_221)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M71 68.2344V52.7031C71 49.7355 67.5891 48.2518 65.6004 50.3596L60.8357 55.3795L52.408 46.5037L47.0628 51.8489L55.6179 60.857L50.8504 65.877C48.8631 67.9709 50.2723 71.5625 53.0893 71.5625H67.8393C68.2546 71.5636 68.6661 71.4783 69.0501 71.3114C69.434 71.1445 69.7829 70.8994 70.0766 70.5902C70.3703 70.2809 70.6031 69.9136 70.7615 69.5093C70.92 69.105 71.001 68.6717 71 68.2344ZM35.4234 52.394L27.3782 60.8709L32.1496 65.877C34.1369 67.9709 32.7277 71.5625 29.9107 71.5625H15.1607C14.7454 71.5636 14.3339 71.4783 13.9499 71.3114C13.566 71.1445 13.2171 70.8994 12.9234 70.5902C12.6297 70.2809 12.397 69.9136 12.2385 69.5093C12.08 69.105 11.999 68.6717 12 68.2344V52.7031C12 49.7355 15.4096 48.2518 17.3996 50.3457L22.1657 55.3656L30.0737 47.0442L35.4234 52.394ZM30.5347 34.4359L35.8798 29.0907L27.3822 20.143L32.1496 15.1231C34.1369 13.0291 32.7277 9.43751 29.9107 9.43751H15.1607C14.7454 9.43641 14.3339 9.52175 13.9499 9.68861C13.566 9.85548 13.2171 10.1006 12.9234 10.4098C12.6297 10.7191 12.397 11.0864 12.2385 11.4907C12.08 11.895 11.999 12.3283 12 12.7656V28.2969C12 31.2645 15.4109 32.7483 17.3996 30.6543L22.1643 25.6205L30.5347 34.4359ZM46.6027 29.6321L51.9518 34.9813L60.8344 25.6344L65.6004 30.6543C67.5904 32.7483 71 31.2645 71 28.2969V12.7656C71.001 12.3283 70.92 11.895 70.7615 11.4907C70.6031 11.0864 70.3703 10.7191 70.0766 10.4098C69.7829 10.1006 69.434 9.85548 69.0501 9.68861C68.6661 9.52175 68.2546 9.43641 67.8393 9.43751H53.0893C50.2723 9.43751 48.8631 13.0291 50.8504 15.1231L55.6218 20.1291L46.6027 29.6321Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_90_221">
+<rect width="59" height="71" fill="white" transform="translate(12 5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/docs/components/floating-images1.html b/src/docs/components/floating-images1.html
new file mode 100644
index 000000000..7560806c5
--- /dev/null
+++ b/src/docs/components/floating-images1.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+  <title>Images</title>
+
+  <meta name="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!">
+  <meta name="keywords" content="KEYWORDS">
+
+  <link rel="schema.DCTERMS" href="http://purl.org/dc/terms/">
+  <link rel="schema.AGLSTERMS" href="https://agls.gov.au/documents/aglsterms/">
+
+  <meta name="DCTERMS.creator" scheme="AGLSTERMS.GOLD" content="c=AU; o=The State of Queensland; ou=DEPARTMENT NAME; ou=UNIT NAME">
+  <meta name="DCTERMS.publisher" scheme="AGLSTERMS.AglsAgent" content="corporateName=The State of Queensland; jurisdiction=Queensland">
+  <meta name="DCTERMS.created" content="2010-11-04">
+  <meta name="DCTERMS.modified" content="2011-03-05">
+  <meta name="DCTERMS.title" content="Add your heading">
+  <meta name="DCTERMS.alternative" content="Add your heading">
+  <meta name="DCTERMS.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!">
+  <meta name="DCTERMS.subject" scheme="AGLSTERMS.APAIS" content="SUBJECT">
+  <meta name="AGLSTERMS.function" scheme="AGLSTERMS.AGIFT" content="FUNCTION">
+  <meta name="DCTERMS.type" scheme="DCTERMS.DCMIType" content="Text">
+  <meta name="AGLSTERMS.documentType" scheme="AGLSTERMS.agls-document" content="guidelines">
+  <meta name="DCTERMS.audience" scheme="AGLSTERMS.agls-audience" content="">
+  <meta name="DCTERMS.jurisdiction" scheme="AGLSTERMS.AglsJuri" content="Queensland">
+
+  <!-- Open graph -->
+  <meta property="og:title" content="Queensland Government">
+  <meta property="og:Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!">
+  <meta property="og:image" content="/assets/v4/latest/images/coat-of-arms/coa-thumbnail.png">
+  <meta property="og:url" content="">
+  <meta property="og:type" content="article" />
+
+  <!-- Twitter -->
+  <meta name="twitter:card" content="summary" />
+  <meta name="twitter:title" content="Queensland Government" />
+  <meta name="twitter:Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!" />
+  <meta name="twitter:image" content="/assets/v4/latest/images/coat-of-arms/coa-thumbnail.png" />
+
+  <!--#include virtual="/assets/includes-local/head-assets.html"-->
+
+</head>
+
+<body data-qg-accessibility="true">
+<!--#include virtual="/assets/includes-local/analytics.html"-->
+<!--#include virtual="/assets/includes-local/header/access.html"-->
+
+
+
+<!--#include virtual="/assets/includes-local/header/header.html"-->
+<div class="qg-global-breadcrumb qg-breadcrumb">
+  <div class="container-fluid qg-site-width">
+    <nav id="qg-breadcrumb" aria-label="breadcrumb" class="qg-breadcrumb-nav row">
+      <ol class="qg-breadcrumb-list">
+        <li class="qg-breadcrumb-list-item">
+          <a href="/" class="qg-breadcrumb-list-item__link">
+            Home
+          </a>
+        </li>
+        <li class="qg-breadcrumb-list-item">
+          <a href="../" class="qg-breadcrumb-list-item__link">
+            Web Template Documentation
+          </a>
+        </li>
+        <li class="qg-breadcrumb-list-item">
+          <a href="../components.html" class="qg-breadcrumb-list-item__link">
+            Components
+          </a>
+        </li>
+        <li class="qg-breadcrumb-list-item">
+          <a href="#" class="qg-breadcrumb-list-item__link">
+            Images
+          </a>
+        </li>
+      </ol>
+    </nav>
+  </div>
+</div>
+<div class="container-fluid qg-site-width">
+  <div id="qg-content">
+    <div id="qg-one-col" class="row wide">
+
+      <div id="qg-primary-content" role="main">
+        <h1 id="images" class="category">Images</h1>
+        <p><span class="label label-primary" title="Heavily customised bootstrap implementation">Customised</span></p>
+        <p>Publishers can use images to provide a visual representation of context.</p>
+        <p>Publishers can use standard <a href="https://getbootstrap.com/css/#floating-images.html">Bootstrap image utilities</a> as well as the following custom image features.</p>
+
+        <h3 id="figures">Figures</h3>
+        <p><span class="label label-default" title="Default HTML5 implementation">Default HTML5</span></p>
+        <p> </p>
+        <p>To use figures, just add the standard HTML5 figure code in the <code>&lt;div id="qg-primary-content"&gt;</code> element, or add the class <code>qg-fig</code> to any figure element outside of the qg-primary-content element:</p>
+
+        <br/><h4>HTML</h4>
+        <pre><code class="language-markup">
+   &lt;figure&gt;
+     &lt;img src="https://via.placeholder.com/300.png/ccc/ccc" alt="" /&gt;
+     &lt;figcaption>
+       Caption text here
+     &lt;div class="figure-credits"&gt;Figure credits here&lt;/div&gt;
+     &lt;/figcaption&gt;
+   &lt;/figure&gt;
+                </code></pre>
+
+        <div class="qg-tmplt-example">
+          <div class="panel-body">
+            <figure>
+              <img src="https://via.placeholder.com/300.png/ccc/ccc" alt=""/>
+              <figcaption>
+                Caption text here
+                <div class="figure-credits">Figure credits here</div>
+              </figcaption>
+            </figure>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+          </div>
+        </div>
+
+        <p>You can pull this figure left or right (turning it into a cut-in image) by adding the class <code>pull-right</code> or <code>pull-left</code> to the figure element <code>&lt;figure class="pull-right"&gt;</code>.</p>
+
+        <div class="qg-tmplt-example">
+          <div class="panel-body">
+            <figure class="pull-right">
+              <img src="https://via.placeholder.com/300.png/ccc/ccc" alt=""/>
+              <figcaption>
+                Caption text here
+                <div class="figure-credits">Figure credits here</div>
+              </figcaption>
+            </figure>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          </div>
+        </div>
+
+        <p>You can also unstyled the figure by adding <code>qg-unstyled</code> to the figure <code>&lt;figure class="qg-unstyled"&gt;</code>. Unstyled figures also work with pull-right and pull-left.</p>
+
+        <div class="qg-tmplt-example">
+          <div class="panel-body">
+            <figure class="qg-unstyled">
+              <img src="https://via.placeholder.com/300.png/ccc/ccc" alt="" />
+              <figcaption>
+                Caption text here
+                <div class="figure-credits">Figure credits here</div>
+              </figcaption>
+            </figure>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.</p>
+          </div>
+        </div>
+
+        <p>If you need to remove the standard styling of a figure element in the qg-primary-content element, add the
+          class <code>qg-nofig</code> to the figure element <code>&lt;figure class="qg-nofig"&gt;</code>.</p>
+
+      </div>
+    </div>
+  </div>
+</div>
+<br />
+<br />
+<br />
+<!--#include virtual="/assets/includes-local/footer/footer.html"-->
+
+<script>
+  var qg = qg || {};
+  qg.swe = qg.swe || {};
+  // Used by the feedback form.
+  qg.swe.franchiseTitle = 'Franchise Title';
+</script>
+
+<!--#include virtual="/assets/includes-local/footer/footer-scripts.html"-->
+
+</body>
+
+</html>
diff --git a/src/docs/components/images.html b/src/docs/components/images.html
index bec1d5c34..e2ad56833 100644
--- a/src/docs/components/images.html
+++ b/src/docs/components/images.html
@@ -85,22 +85,22 @@ <h1 id="images" class="category">Images</h1>
         <p><span class="label label-primary" title="Heavily customised bootstrap implementation">Customised</span></p>
         <p>Publishers can use images to provide a visual representation of context.</p>
         <p>Publishers can use standard <a href="https://getbootstrap.com/css/#images">Bootstrap image utilities</a> as well as the following custom image features.</p>
-
         <h3 id="figures">Figures</h3>
         <p><span class="label label-default" title="Default HTML5 implementation">Default HTML5</span></p>
         <p> </p>
         <p>To use figures, just add the standard HTML5 figure code in the <code>&lt;div id="qg-primary-content"&gt;</code> element, or add the class <code>qg-fig</code> to any figure element outside of the qg-primary-content element:</p>
 
-        <br/><h4>HTML</h4>
+        <br/>
+        <h4>Basic</h4>
         <pre><code class="language-markup">
-   &lt;figure&gt;
-     &lt;img src="https://via.placeholder.com/300.png/ccc/ccc" alt="" /&gt;
-     &lt;figcaption>
-       Caption text here
-     &lt;div class="figure-credits"&gt;Figure credits here&lt;/div&gt;
-     &lt;/figcaption&gt;
-   &lt;/figure&gt;
-                </code></pre>
+&lt;figure&gt;
+  &lt;img src="https://via.placeholder.com/300.png/ccc/ccc" alt="" /&gt;
+  &lt;figcaption>
+    Caption text here
+  &lt;div class="figure-credits"&gt;Figure credits here&lt;/div&gt;
+  &lt;/figcaption&gt;
+&lt;/figure&gt;
+        </code></pre>
 
         <div class="qg-tmplt-example">
           <div class="panel-body">
@@ -114,11 +114,26 @@ <h3 id="figures">Figures</h3>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
           </div>
         </div>
-
-        <p>You can pull this figure left or right (turning it into a cut-in image) by adding the class <code>pull-right</code> or <code>pull-left</code> to the figure element <code>&lt;figure class="pull-right"&gt;</code>.</p>
-
+        <br/>
+        <h4>Alignment</h4>
+        <p>You can pull this figure left or right (turning it into a cut-in image) by adding the class <code>pull-right</code> or <code>pull-left</code> to the figure element <code>&lt;figure class="pull-right"&gt;</code>, 
+          you also need to add <code>class="clearfix"</code> to the parent container.</p>
+        <pre><code class="language-markup">
+&lt;div class="clearfix"&gt;
+  &lt;figure class="pull-right"&gt;
+    &lt;img src="https://via.placeholder.com/300.png/ccc/ccc" alt="" /&gt;
+    &lt;figcaption>
+      Caption text here
+    &lt;div class="figure-credits"&gt;Figure credits here&lt;/div&gt;
+    &lt;/figcaption&gt;
+  &lt;/figure&gt;
+  &lt;p&gt;
+    Image description
+  &lt;/p&gt;
+&lt;/div&gt;
+        </code></pre>
         <div class="qg-tmplt-example">
-          <div class="panel-body">
+          <div class="panel-body clearfix">
             <figure class="pull-right">
               <img src="https://via.placeholder.com/300.png/ccc/ccc" alt=""/>
               <figcaption>
@@ -128,11 +143,20 @@ <h3 id="figures">Figures</h3>
             </figure>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
           </div>
+          <div class="panel-body clearfix">
+            <figure class="pull-left">
+              <img src="https://via.placeholder.com/300.png/ccc/ccc" alt=""/>
+              <figcaption>
+                Caption text here
+                <div class="figure-credits">Figure credits here</div>
+              </figcaption>
+            </figure>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          </div>
         </div>
-
-        <p>You can also unstyled the figure by adding <code>qg-unstyled</code> to the figure <code>&lt;figure class="qg-unstyled"&gt;</code>. Unstyled figures also work with pull-right and pull-left.</p>
-
-        <div class="qg-tmplt-example">
+        <!--  qg-unstyled will be deprecated -->
+        <!-- <p>You can also unstyled the figure by adding <code>qg-unstyled</code> to the figure <code>&lt;figure class="qg-unstyled"&gt;</code>. Unstyled figures also work with pull-right and pull-left.</p> -->
+        <!-- <div class="qg-tmplt-example">
           <div class="panel-body">
             <figure class="qg-unstyled">
               <img src="https://via.placeholder.com/300.png/ccc/ccc" alt="" />
@@ -144,11 +168,41 @@ <h3 id="figures">Figures</h3>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
               dolore magna aliqua.</p>
           </div>
-        </div>
+        </div> -->
 
-        <p>If you need to remove the standard styling of a figure element in the qg-primary-content element, add the
-          class <code>qg-nofig</code> to the figure element <code>&lt;figure class="qg-nofig"&gt;</code>.</p>
+        <!-- <p>If you need to remove the standard styling of a figure element in the qg-primary-content element, add the
+          class <code>qg-nofig</code> to the figure element <code>&lt;figure class="qg-nofig"&gt;</code>.</p> -->
 
+        <h1 class="mt-4">Enlarge image</h1>
+        <p><span class="label label-primary" title="Custom QG styles">Custom</span></p>
+        <p>Image can be enlargable in a lightbox with the following template. By defining <code>data-fancybox</code> you could group images to be navigated in the same lightbox.</p>
+        <br/><h4>HTML</h4>
+        <pre><code class="language-markup">
+&lt;figure&gt;
+  &lt;a href="https://picsum.photos/id/237/1200/700" data-fancybox="gallery_id"&gt;
+    &lt;span&gt;View larger image&lt;/span&gt;
+    &lt;img src="https://picsum.photos/id/237/500/200" alt="image_description"/&gt;
+    &lt;img class="figure__expand-icon" src="/assets/v4/latest/images/Expand.svg" alt="Enlarge image"&gt;
+  &lt;/a&gt;
+  &lt;figcaption&gt;
+    Caption text here
+    &lt;div class="figure-credits"&gt;Figure credits here&lt;/div&gt;
+  &lt;/figcaption&gt;
+&lt;/figure&gt;
+        </code></pre>
+        <section>
+          <figure>
+            <a href="https://picsum.photos/id/237/1200/700" data-fancybox="gallery_id">
+              <span>View larger image</span>
+              <img src="https://picsum.photos/id/237/500/200" alt="image_description"/>
+              <img class="figure__expand-icon" src="/assets/v4/latest/images/Expand.svg" alt="Enlarge image">
+            </a>
+            <figcaption>
+              Caption text here
+              <div class="figure-credits">Figure credits here</div>
+            </figcaption>
+          </figure>
+        </section>
       </div>
     </div>
   </div>